/* ========================================================= Latentea — estilos del tema Base en blanco y negro con grano; el color solo significa algo. Los colores de cada canal se definen en content/site.yml. Dos temas: oscuro (por defecto) y claro, . El botón de la cabecera los cambia. ========================================================= */ :root{ color-scheme: dark; --void:#0A0B0F; --void-2:#121419; --line:#262a33; --ash:#C9CCD1; --ash-dim:#7C8089; --hi:#fff; --bg:10,11,15; /* --void en r,g,b, para las veladuras: rgba(var(--bg),.9) */ --film:255,255,255; /* las líneas de barrido */ --shadow:rgba(0,0,0,.55); --algo:#2448E0; --algo-glow:#4F6BFF; --sute:#E2321F; --sute-glow:#FF4436; --morea:#A56BFF; --morea-plate:#7338F0; --display:"Archivo","Arial Narrow",Arial,sans-serif; --myth:"Spectral",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --g:clamp(16px,3vw,40px); --mood:#4F6BFF; } /* tema claro: papel en vez de pantalla. Los colores de canal pasan a su versión "claro" (light-dark() en la plantilla) */ :root[data-theme="light"]{ color-scheme: light; --void:#EFEEE9; --void-2:#E5E4DE; --line:#CFCEC6; --ash:#1D2026; --ash-dim:#5C616A; --hi:#0B0C10; --bg:239,238,233; --film:0,0,0; --shadow:rgba(20,22,30,.16); } *{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0} html{background:var(--void)} body{background:var(--void);color:var(--ash);font:16px/1.6 var(--display);padding-inline:var(--g);padding-block:0;overflow-x:hidden;-webkit-font-smoothing:antialiased} a{color:inherit} a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation} :focus-visible{outline:2px solid var(--algo-glow);outline-offset:3px} ::selection{background:var(--algo);color:#fff} /* fixed layers: 3D, film, labels */ #gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;touch-action:pan-y;cursor:grab} #gl.drag{cursor:grabbing} #gl.hot{cursor:pointer} #grain{position:fixed;inset:0;width:100%;height:100%;z-index:1;opacity:.05;pointer-events:none} .film{position:fixed;inset:0;z-index:1;pointer-events:none} .film.scan{background:repeating-linear-gradient(0deg,rgba(var(--film),.028) 0 1px,transparent 1px 3px)} .film.vig{background:radial-gradient(130% 95% at 55% 45%,transparent 50%,rgba(var(--bg),.8) 100%)} .shade{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(var(--bg),0) 0%,rgba(var(--bg),0) 36%,rgba(var(--bg),.6) 44%,rgba(var(--bg),.85) 100%)} #labels{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;transition:visibility 0s} .ax{position:absolute;left:0;top:0;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim);white-space:nowrap;will-change:transform} .lab{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:baseline;gap:8px;text-decoration:none;white-space:nowrap;will-change:transform;padding:4px 6px;margin:-12px 0 0 10px;transition:opacity .35s} .lab b{font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--ash-dim);transition:color .3s} .lab span{font:800 13.5px/1.1 var(--display);font-variation-settings:"wdth" 74;text-transform:uppercase;letter-spacing:.01em;color:var(--ash);transition:color .3s,opacity .3s,text-shadow .3s} .lab.on span{color:var(--c);text-shadow:0 0 14px var(--c)} .lab.on b,.lab.rel b{color:var(--c)} .lab.dim{opacity:.25} .lab.flip{flex-direction:row-reverse;margin-left:-10px} .lab.off{opacity:.12} body.idx .lab span{opacity:0} body.idx .lab.on span,body.idx .lab.rel span{opacity:1} .wlab{position:absolute;left:0;top:0;font:500 11px/1 var(--mono);padding:3px 5px;background:rgba(var(--bg),.85);border:1px solid currentColor;transform:translate(-50%,-50%);opacity:0;white-space:nowrap;will-change:transform} :root[data-theme="light"] .lab span{text-shadow:0 0 3px rgba(var(--bg),.95),0 0 10px rgba(var(--bg),.9)} /* un halo de papel: se lee aunque pase por delante del robot */ :root[data-theme="light"] .brand b{text-shadow:none} :root[data-theme="light"] #grain{opacity:.07} /* drone probe */ #probe{position:fixed;left:0;top:0;z-index:25;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform} #probe i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--mood);box-shadow:0 0 14px 4px var(--mood)} #probe span{position:absolute;left:16px;top:8px;font:10.5px/1.4 var(--mono);color:var(--ash);white-space:nowrap;letter-spacing:.04em;text-transform:uppercase} @media (pointer:coarse){#probe{display:none}} /* top + hud */ .top{position:fixed;left:0;right:0;top:0;z-index:20;transition:background .35s;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--g) 18px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;pointer-events:none} .top > *{pointer-events:auto} body.scrolled .top{background:linear-gradient(rgba(var(--bg),.95) 58%,rgba(var(--bg),0))} .brand{text-decoration:none;color:var(--ash)} .brand b{color:var(--mood);font-weight:500;text-shadow:0 0 10px var(--mood)} .brand span{color:var(--ash-dim);margin-left:8px} .top-r{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)} .top nav{display:flex;gap:clamp(12px,2vw,26px)} .top nav a{text-decoration:none;color:var(--ash-dim);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .top nav a[aria-current="true"]{color:var(--ash);border-color:var(--mood)} .top .langs{gap:10px} .theme{display:grid;place-items:center;width:32px;height:32px;margin:-9px -8px -9px -4px;padding:0;background:none;border:0;color:var(--ash-dim);cursor:pointer;transition:color .2s} .theme svg{transition:transform .7s cubic-bezier(.2,.8,.2,1)} :root[data-theme="light"] .theme svg{transform:rotate(180deg)} .hud{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-between;gap:16px;padding:14px var(--g) calc(14px + env(safe-area-inset-bottom,0px));font:10.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ash-dim);pointer-events:none;font-variant-numeric:tabular-nums;transition:opacity .6s} .hud b{font-weight:500;color:var(--mood)} .rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sute);margin-right:7px;vertical-align:0} @media (prefers-reduced-motion:no-preference){.rec{animation:blink 1.2s steps(1) infinite}} @keyframes blink{50%{opacity:0}} /* SPACE / HERO */ main{position:relative;z-index:3;pointer-events:none} .space{min-height:100svh;display:flex;align-items:flex-end;padding-block:120px clamp(64px,10vh,110px)} .space-intro{max-width:920px;pointer-events:auto;transition:opacity .6s;text-shadow:0 0 30px rgba(var(--bg),.95)} body.reading .space-intro,body.reading .hud{opacity:0;pointer-events:none} .eyebrow{margin:0;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)} .eyebrow b{color:var(--mood);font-weight:500} h1{margin:16px 0 0;font:900 clamp(42px,6.4vw,100px)/.86 var(--display);font-variation-settings:"wdth" 68;letter-spacing:-.01em;text-transform:uppercase;color:var(--ash)} h1 .l{display:block;overflow:hidden;padding-bottom:.04em} h1 .l > span{display:inline-block} .glitch{position:relative;display:inline-block} .glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none} .glitch::before{color:var(--algo-glow);clip-path:inset(18% 0 62% 0);transform:translateX(-6px);opacity:.9} .glitch::after{color:var(--sute);clip-path:inset(64% 0 14% 0);transform:translateX(5px);opacity:.85} @media (prefers-reduced-motion:no-preference){.glitch::before{animation:gA 3.2s steps(1) infinite}.glitch::after{animation:gB 4.1s steps(1) infinite}} @keyframes gA{0%,86%{clip-path:inset(18% 0 62% 0);transform:translateX(-6px)}88%{clip-path:inset(40% 0 44% 0);transform:translateX(12px)}92%{clip-path:inset(8% 0 80% 0);transform:translateX(-14px)}} @keyframes gB{0%,80%{clip-path:inset(64% 0 14% 0);transform:translateX(5px)}84%{clip-path:inset(30% 0 52% 0);transform:translateX(-10px)}90%{clip-path:inset(72% 0 6% 0);transform:translateX(9px)}} .tagline{margin:18px 0 0;font:italic 400 clamp(20px,2.4vw,28px)/1.25 var(--myth);color:var(--sute-glow)} .lede{margin:14px 0 0;font:400 clamp(16px,1.4vw,18px)/1.55 var(--myth);color:var(--ash);max-width:48ch} .hint{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font:10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash-dim)} .hint span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--algo-glow);box-shadow:0 0 10px 2px var(--algo-glow);vertical-align:0} /* INDEX */ .index{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr)} .index-col{grid-column:2;pointer-events:auto;background:rgba(var(--bg),.9);border-left:1px solid var(--line);margin-right:calc(-1*var(--g));padding:clamp(88px,12vh,140px) var(--g) 120px clamp(24px,4vw,64px)} .chapter{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap} .chapter .n{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--algo-glow)} .index h2{margin:14px 0 0;font:900 clamp(38px,5.4vw,72px)/.92 var(--display);font-variation-settings:"wdth" 70;text-transform:uppercase;text-wrap:balance} .ix-note{margin:18px 0 0;font:400 17px/1.55 var(--myth);color:var(--ash);max-width:50ch} .ix-note em{color:var(--sute-glow)} .sample{margin:18px 0 0;font:10.5px/1.5 var(--mono);color:var(--ash-dim);border:1px dashed var(--line);padding:8px 12px;display:inline-block} .filters{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0} .f{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 11px;border:1px solid var(--line);background:rgba(var(--bg),.6);color:var(--ash-dim);cursor:pointer;transition:color .2s,border-color .2s,box-shadow .2s} .f[aria-pressed="true"]{color:var(--fc,var(--hi));border-color:var(--fc,var(--ash))} .f[aria-pressed="true"]{box-shadow:0 0 18px -4px var(--fc,transparent)} .rows{list-style:none;margin:18px 0 0;padding:0;border-bottom:1px solid var(--line)} .row[hidden]{display:none} .row a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:6px 22px;padding:24px 14px 26px;border-top:1px solid var(--line);text-decoration:none;position:relative;transition:opacity .35s,background .3s} .row a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--c);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s} .row.on a{background:radial-gradient(60% 140% at 0% 50%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%)} .row.on a::before{transform:scaleY(1);box-shadow:0 0 16px 2px var(--c)} .row .tok{font:500 11px/2 var(--mono);color:var(--ash-dim);letter-spacing:.04em;transition:color .3s} .row h3{margin:0;font:900 clamp(22px,2.6vw,34px)/.98 var(--display);font-variation-settings:"wdth" 72;text-transform:uppercase;color:var(--hi);text-wrap:balance;transition:color .25s} .row p{margin:10px 0 0;font:400 16px/1.5 var(--myth);color:var(--ash);max-width:54ch} .row .meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:10.5px/1.3 var(--mono);color:var(--ash-dim);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:4px} .row .ch{color:var(--c);border:1px solid var(--c);padding:4px 6px} .row .act{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--c);box-shadow:0 0 10px var(--c);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)} .row .wv{position:absolute;right:14px;bottom:6px;font:500 10.5px/1 var(--mono);color:var(--c);opacity:0;transition:opacity .3s} .row.on h3{color:var(--c)} .row.on .tok,.row.rel .tok{color:var(--c)} .row.rel .act{transform:scaleX(var(--w,0))} .row.rel .wv{opacity:1} .row.dim a{opacity:.4} .colophon{margin-top:96px;padding-top:28px;border-top:1px solid var(--line);font:10.5px/1.7 var(--mono);color:var(--ash-dim);letter-spacing:.03em;max-width:64ch} /* READER */ #reader{position:fixed;inset:0;z-index:40;pointer-events:none} .r-prog{position:absolute;right:0;top:0;height:2px;width:min(700px,100%);background:var(--c);box-shadow:0 0 12px var(--c);transform:scaleX(0);transform-origin:left;z-index:3} .r-panel{position:absolute;top:0;right:0;bottom:0;width:min(700px,100%);background:var(--void);border-left:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;padding:0 clamp(20px,4vw,56px) 96px} .r-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(16px + env(safe-area-inset-top,0px)) 0 16px;background:linear-gradient(rgba(var(--bg),.98) 70%,rgba(var(--bg),0));font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim)} .r-top b{color:var(--c);font-weight:500} .r-close{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ash);background:none;border:1px solid var(--line);padding:9px 11px;cursor:pointer;transition:border-color .2s,color .2s} .r-close kbd{font:inherit;color:var(--ash-dim);margin-left:6px} .cartela{margin-top:14px;background:var(--cb);color:var(--ct);padding:clamp(20px,3.6vw,34px);font:900 clamp(30px,5vw,58px)/.92 var(--display);font-variation-settings:"wdth" 64;text-transform:uppercase; -webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.6) 3px 4px);mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.6) 3px 4px)} .cartela small{display:block;font-size:12px;font-variation-settings:"wdth" 100;letter-spacing:.1em;margin-bottom:10px;opacity:.85} .r-meta{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font:10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ash-dim);font-variant-numeric:tabular-nums} .r-meta b{font-weight:500;color:var(--c)} #r-title{margin:26px 0 0;font:900 clamp(34px,4.6vw,56px)/.94 var(--display);font-variation-settings:"wdth" 72;text-transform:uppercase;color:var(--hi);text-wrap:balance} .r-lede{margin:16px 0 0;font:italic 400 clamp(20px,2.2vw,24px)/1.4 var(--myth);color:var(--sute-glow);max-width:40ch} .r-body{margin-top:34px;font:400 19px/1.7 var(--myth);color:var(--ash);max-width:62ch} .r-body p{margin:0 0 1.1em} .r-body h3{margin:1.8em 0 .5em;font:800 21px/1.15 var(--display);font-variation-settings:"wdth" 80;text-transform:uppercase;color:var(--hi)} .r-body blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:1px solid var(--sute-glow);font:italic 400 24px/1.4 var(--myth);color:var(--sute-glow)} .r-body code{font:.8em var(--mono);color:var(--algo-glow)} .r-body pre{margin:1.5em 0;padding:16px 18px;background:var(--void-2);border:1px solid var(--line);overflow-x:auto;font:13px/1.65 var(--mono);color:var(--ash)} .r-body pre .c{color:var(--ash-dim)} .r-body pre .h{color:var(--algo-glow)} .r-body strong{font-weight:500;color:var(--hi)} .r-att{margin-top:56px;padding-top:22px;border-top:1px solid var(--line)} .r-att h3{margin:0;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)} .r-att .f2{margin:8px 0 0;font:10.5px/1.5 var(--mono);color:var(--ash-dim)} .r-att ol{list-style:none;margin:18px 0 0;padding:0} .r-att li a{display:grid;grid-template-columns:40px minmax(0,1fr) 110px 44px;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);text-decoration:none} .r-att .tk{font:10.5px var(--mono);color:var(--ash-dim)} .r-att .tt{font:800 15px/1.2 var(--display);font-variation-settings:"wdth" 78;text-transform:uppercase;color:var(--ash);transition:color .2s} .r-att .bar{height:2px;background:var(--line);position:relative} .r-att .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ac);box-shadow:0 0 8px var(--ac)} .r-att .wt{font:500 11px var(--mono);text-align:right;color:var(--ac);font-variant-numeric:tabular-nums} .r-next{display:block;margin-top:40px;padding:22px 16px 24px;border:1px solid var(--line);text-decoration:none;position:relative;transition:border-color .2s,box-shadow .2s} .r-next:focus-visible{border-color:var(--nc);box-shadow:0 0 26px -6px var(--nc)} .r-next .k{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash-dim)} .r-next .t{display:block;margin-top:10px;font:900 clamp(24px,3vw,34px)/.98 var(--display);font-variation-settings:"wdth" 72;text-transform:uppercase;color:var(--hi);padding-right:40px} .r-next .ar{position:absolute;right:16px;bottom:24px;font:500 20px/1 var(--mono);color:var(--nc);transition:transform .4s cubic-bezier(.2,.8,.2,1)} /* WIPE + LOADER */ .wipe{position:fixed;inset:0;z-index:60;background:var(--wc,var(--algo));transform:scaleY(0);transform-origin:bottom;pointer-events:none;display:grid;place-items:center; -webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.72) 3px 4px);mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.72) 3px 4px)} .wipe span{font:900 clamp(34px,8vw,100px)/.9 var(--display);font-variation-settings:"wdth" 62;text-transform:uppercase;color:var(--wt,#dfe3ff);text-align:center;padding-inline:16px} #loader{position:fixed;inset:0;z-index:100;background:var(--void);display:grid;place-items:center;padding:24px;clip-path:inset(0 0 0% 0)} .ld{display:flex;flex-direction:column;align-items:center;gap:16px} .ld-t{margin:0;font:900 clamp(34px,6vw,64px)/.9 var(--display);font-variation-settings:"wdth" 64;text-transform:uppercase;color:var(--ash)} .ld-c{margin:0;font:10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim);font-variant-numeric:tabular-nums} .ld-bar{display:block;width:220px;height:2px;background:var(--line);position:relative;overflow:hidden} .ld-bar b{position:absolute;inset:0;background:var(--algo-glow);box-shadow:0 0 10px var(--algo-glow);transform:scaleX(0);transform-origin:left} /* hover only on devices that really hover (no sticky hover after a tap) */ @media (hover:hover){ .lab:hover span{color:var(--c);text-shadow:0 0 14px var(--c)} .top nav a:hover{color:var(--ash);border-color:var(--mood)} .theme:hover{color:var(--ash)} .f:hover{color:var(--fc,var(--hi));border-color:var(--fc,var(--ash))} .row a:hover{background:radial-gradient(60% 140% at 0% 50%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%)} .row a:hover::before{transform:scaleY(1);box-shadow:0 0 16px 2px var(--c)} .row a:hover h3{color:var(--c)} .r-close:hover{border-color:var(--c);color:var(--c)} .r-att li a:hover .tt{color:var(--ac)} .r-next:hover{border-color:var(--nc);box-shadow:0 0 26px -6px var(--nc)} .r-next:hover .ar{transform:translateX(6px)} .pk-att button:hover{border-color:var(--ac);color:var(--ac)} } /* PEEK — touch preview card: shows the attention arcs before reading */ .peek{position:fixed;left:var(--g);right:var(--g);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;max-width:460px;background:rgba(var(--bg),.95);border:1px solid var(--line);border-top:2px solid var(--c);box-shadow:0 -14px 40px -18px var(--c);padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px} .pk-top{display:flex;justify-content:space-between;align-items:center;gap:10px} .pk-meta{font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash-dim)} .pk-meta b{color:var(--c);font-weight:500} .pk-x{width:36px;height:36px;margin:-6px -8px -6px 0;background:none;border:0;color:var(--ash);font:400 22px/1 var(--mono);cursor:pointer} .pk-t{margin:0;font:900 clamp(22px,6.2vw,28px)/.98 var(--display);font-variation-settings:"wdth" 72;text-transform:uppercase;color:var(--hi);overflow-wrap:anywhere} .pk-l{margin:0;font:400 15px/1.45 var(--myth);color:var(--ash);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pk-att{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .pk-att .pk-k{font:10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash-dim);margin-right:2px} .pk-att button{font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--ac);background:none;border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);padding:9px 10px;min-height:36px;cursor:pointer} .pk-go{margin-top:4px;min-height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;background:var(--cb);color:var(--ct);border:0;font:900 17px/1 var(--display);font-variation-settings:"wdth" 80;text-transform:uppercase;letter-spacing:.02em;cursor:pointer; -webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.72) 3px 4px);mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.72) 3px 4px)} body.peeking .space-intro{opacity:0;pointer-events:none} .cartela,.wipe span{overflow-wrap:anywhere} @media (hover:none){.lab{padding:10px;margin:-18px 0 0 4px}.lab.flip{margin-left:-4px}} /* single-column layout: phones and tablets in portrait */ @media (max-width:820px){ .top .secs a:nth-child(1){display:none} .top-r{gap:18px} .top nav a{padding:10px 0} .theme{width:40px;height:40px;margin:-13px -10px -13px -6px} .brand span{display:none} .hud{display:none} .index{grid-template-columns:minmax(0,1fr)} .index-col{grid-column:1;margin-inline:calc(-1*var(--g));border-left:0;padding:84px var(--g) calc(96px + env(safe-area-inset-bottom,0px))} .shade{background:rgba(var(--bg),.86)} body.idx #labels,body.reading #labels{visibility:hidden} .lab span{opacity:0} .lab.on span{opacity:1;white-space:normal;max-width:min(56vw,260px);display:inline-block} .space{position:relative;z-index:0} .space::after{content:"";position:absolute;left:calc(-1*var(--g));right:calc(-1*var(--g));bottom:0;height:62%;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(var(--bg),.94) 38%,rgba(var(--bg),0))} .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--g));padding-inline:var(--g);scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch} .filters::-webkit-scrollbar{display:none} .f{flex:0 0 auto;min-height:42px;scroll-snap-align:start} .row a{grid-template-columns:40px minmax(0,1fr);padding:20px 10px 22px} .row .meta{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 14px;padding-top:6px} .r-panel{width:100%;border-left:0;padding:0 20px calc(96px + env(safe-area-inset-bottom,0px))} .r-prog{width:100%} .r-top .lbl{display:none} .r-body{font-size:17.5px;line-height:1.68} .r-body blockquote{font-size:21px} .r-att li a{grid-template-columns:34px minmax(0,1fr) 44px;min-height:48px} .r-att .bar{display:none} .r-close{min-height:40px} } @media (max-width:820px) and (hover:none){ #gl{height:100lvh;bottom:auto} #grain{opacity:.045} } /* phones in landscape */ @media (max-height:520px) and (orientation:landscape){ .space{padding-block:72px 22px} h1{font-size:clamp(30px,10.5vh,52px)} .tagline{font-size:18px;margin-top:10px} .lede{display:none} .hint{margin-top:12px} .hud{display:none} .index-col{padding-top:72px} .peek{max-width:420px;right:auto} .lab span{opacity:0} .lab.on span,.lab.rel span{opacity:1} } @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}} /* ---------- contenido largo escrito en Markdown o LaTeX ---------- */ .r-body h2,.r-body h3{margin:1.8em 0 .5em;font:800 21px/1.15 var(--display);font-variation-settings:"wdth" 80;text-transform:uppercase;color:var(--hi)} .r-body h2{font-size:24px} .r-body h4{margin:1.6em 0 .4em;font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)} .r-body a{color:var(--c);text-decoration-thickness:1px;text-underline-offset:3px} .r-body ul,.r-body ol{margin:0 0 1.1em;padding-left:1.3em} .r-body li{margin:.3em 0} .r-body li::marker{color:var(--c)} .r-body img,.r-body video{max-width:100%;height:auto;display:block;margin:1.4em 0;border:1px solid var(--line)} .r-body figure{margin:1.6em 0} .r-body figure img{margin:0} .r-body figcaption{margin-top:8px;font:12px/1.5 var(--mono);color:var(--ash-dim)} .r-body hr{border:0;border-top:1px solid var(--line);margin:2em 0} .r-body table{border-collapse:collapse;margin:1.4em 0;font:14px/1.5 var(--mono);display:block;overflow-x:auto;max-width:100%} .r-body th,.r-body td{border:1px solid var(--line);padding:6px 10px;text-align:left} .r-body th{color:var(--hi);font-weight:500} .r-body pre code{color:inherit;font:inherit} .r-body .katex{font-size:1.06em;color:var(--hi)} .r-body .katex-display{overflow-x:auto;overflow-y:hidden;padding:.4em 0;margin:1.3em 0} .r-body .footnotes,.r-body .footnotes-sep+.footnotes{margin-top:2.4em;font-size:15px;line-height:1.55;color:var(--ash-dim)} .r-body .footnotes-sep,.r-body .footnotes hr{border:0;border-top:1px solid var(--line);margin:2.4em 0 1em} .r-body .footnote-ref a,.r-body a.footnote-ref{font:500 .68em var(--mono);text-decoration:none;color:var(--c)} .r-body .footnote-backref,.r-body .footnote-back{text-decoration:none;color:var(--c)} .r-body .csl-bib-body{margin-top:2em;font-size:15px;line-height:1.55;color:var(--ash-dim)} .r-body .csl-entry{margin:.5em 0} /* ---------- figuras interactivas (content/figuras/) ---------- */ .r-body figure[data-figura]{margin:2em 0} .fig-lienzo{position:relative;font:12px/1.5 var(--mono);color:var(--ash)} .fig-lienzo svg,.fig-lienzo canvas{display:block;max-width:100%} .fig-lienzo label{display:flex;align-items:center;gap:12px;margin:10px 0;letter-spacing:.04em} .fig-lienzo input[type=range]{flex:1;min-width:0;margin:0;accent-color:var(--c)} .fig-lienzo output{min-width:4ch;color:var(--hi);text-align:right} .fig-lienzo button{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ash);background:none;border:1px solid var(--line);padding:9px 11px;cursor:pointer;transition:border-color .2s,color .2s} .fig-lienzo button[aria-pressed="true"]{border-color:var(--c);color:var(--c)} @media (hover:hover){.fig-lienzo button:hover{border-color:var(--c);color:var(--c)}} .fig-error{padding:16px;border:1px dashed var(--line);color:var(--ash-dim)} .fig-error code{display:block;margin-top:8px;font:inherit;color:var(--sute-glow);white-space:pre-wrap} /* ---------- notas al margen (::: nota) y notas al pie copiadas al margen ---------- */ .r-body aside{margin:1.6em 0;padding-top:12px;border-top:1px solid var(--c);font:400 15px/1.55 var(--myth);color:var(--ash-dim)} .r-body aside p{margin:0 0 .6em} .r-body aside p:last-child{margin-bottom:0} .r-body .sn{display:none;font:400 15px/1.55 var(--myth);color:var(--ash-dim)} .r-body .sn b{margin-right:4px;font:500 11px/1 var(--mono);color:var(--c)} .r-body .sn.flash{animation:sn-flash 1.6s ease-out} @keyframes sn-flash{from{color:var(--hi)}} /* ---------- citas [@clave] y lista de referencias ---------- */ .r-body a.cite{color:var(--c);text-decoration:none} @media (hover:hover){.r-body a.cite:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}} .r-body .cite-missing{font:.8em var(--mono);color:var(--sute-glow)} .r-body .refs{margin-top:2.4em;padding-top:.2em;border-top:1px solid var(--line)} .r-body .refs-list{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.55;color:var(--ash-dim)} .r-body .refs-list li{margin:0 0 .8em;padding-left:1.6em;text-indent:-1.6em} .r-body .refs-list li.flash{animation:sn-flash 1.6s ease-out} .r-body .refs-list a,.cite-card a{color:var(--c);overflow-wrap:anywhere} .cite-card{position:absolute;z-index:5;width:max-content;max-width:min(440px,calc(100vw - 24px));padding:14px 16px;background:var(--void-2);border:1px solid var(--line);border-top:2px solid var(--c);box-shadow:0 18px 50px var(--shadow);font:400 15px/1.5 var(--myth);color:var(--ash);pointer-events:auto} /* ---------- modo artículo («formato: articulo» en la cabecera) ---------- El lector ocupa toda la pantalla: una columna de texto con un margen a la derecha para las notas, y tres anchos para figuras y bloques: normal, .ancha (texto + margen) y .pantalla (todo el ancho). Si el margen no cabe, todo vuelve a una sola columna y las notas se quedan en el texto. */ .r-art{--pad:clamp(20px,4vw,56px);--gap:48px;--mar:230px;--page:min(100cqw - 2 * var(--pad), 920px)} .r-art .r-prog{width:100%} .r-art .r-panel{width:100%;border-left:0;padding-inline:0;overflow-x:hidden} .r-art .r-top{padding-inline:var(--pad)} /* #rInner ocupa todo el ancho útil (sin la barra de scroll): 100cqw se mide ahí, y la columna va centrada */ .r-art #rInner{container:lector/inline-size} .r-art #rInner>*{margin-inline:calc((100cqw - var(--page)) / 2)} .r-art #r-title{font-size:clamp(40px,6.2vw,84px);max-width:16ch} .r-art .r-body{max-width:none} .r-art .r-body .pantalla{width:100cqw;margin-left:calc((var(--page) - 100cqw) / 2);clear:both} .r-art .r-body .pantalla img{border-inline:0} .r-art .r-body .pantalla figcaption{margin-left:calc((100cqw - var(--page)) / 2);max-width:var(--page)} @container lector (min-width:900px){ .r-art .r-body,.r-art .r-att,.r-art .r-next{width:calc(var(--page) - var(--gap) - var(--mar))} .r-art .r-body aside,.r-art .r-body .sn{display:block;float:right;clear:right;width:var(--mar);margin:.35em calc(-1 * (var(--gap) + var(--mar))) 1em 0} .r-art .r-body .ancha{width:var(--page);clear:right} .r-art .r-body .en-margen{display:none} } /* ---------- fuente de las entradas (visible solo sin JavaScript) ---------- */ .post-src{border-top:1px solid var(--line);padding:32px 0} .post-src h2{margin:0;font:900 clamp(28px,4vw,44px)/.95 var(--display);font-variation-settings:"wdth" 72;text-transform:uppercase;color:var(--hi)} .post-src .post-meta{font:10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ash-dim)} .post-src .post-body{font:400 18px/1.7 var(--myth)}