@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(/assets/instrumentsans.woff2) format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/jetbrainsmono.woff2) format('woff2')} @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/instrumentserif-i.woff2) format('woff2')} @font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/oswald.woff2) format('woff2')} /* ═══════════════════════════════════════════════════════════════════ NUREQ · sistema de diseño «El violeta es la máquina. El verde es la verdad.» Violeta = hipótesis, consulta, sistema trabajando. Nunca un logro. Verde = hecho probado. Se gana, no se decora. ═══════════════════════════════════════════════════════════════════ */ :root{ /* superficies */ --s0:#07070D; --s1:#0B0B14; --s2:#0E0E18; --s3:#13131F; --s4:#171725; /* texto — contraste sobre --s0: 17.81 / 9.97 / 6.06 */ --t1:#F2F0FA; --t2:#B9B4C7; --t3:#8E8AA6; /* violeta — v4 es RELLENO ONLY (v3 con texto blanco falla AA: 4.35) */ --v1:#DFD6FF; --v2:#A78BFA; --v3:#7C5CFF; --v4:#5B3BE0; --v5:#2A0E7A; /* semáforo */ --ok:#34D399; --wait:#F5C34B; --no:#F0556B; --aim:#A78BFA; --nil:#8E8AA6; --ok-8:rgba(52,211,153,.08); --ok-24:rgba(52,211,153,.24); --wait-8:rgba(245,195,75,.08);--wait-24:rgba(245,195,75,.24); --no-8:rgba(240,85,107,.08); --no-24:rgba(240,85,107,.24); --v-8:rgba(124,92,255,.08); --v-24:rgba(124,92,255,.24); --grad:linear-gradient(135deg,#5B3BE0 0%,#7C5CFF 52%,#A78BFA 100%); --grad-verdict:linear-gradient(180deg,#7C5CFF 0%,#34D399 100%); /* tipografía */ --fs:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --fd:'Oswald','Arial Narrow',system-ui,sans-serif; --fm:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace; --fz-mono-xs:11px; --fz-mono-sm:13px; --fz-body:16px; --fz-lead:19px; --fz-h4:23px; --fz-h3:28px; --fz-h2:clamp(31px,3.4vw,46px); --fz-h1:clamp(38px,5.4vw,66px); --fz-hero:clamp(31px,4.9vw,66px); /* espacio · radios · bordes */ --sp1:4px; --sp2:8px; --sp3:16px; --sp4:28px; --sp5:48px; --sp6:80px; --sp-sec:clamp(80px,11vh,160px); --r0:0; --r1:4px; --r2:10px; --r3:20px; --rp:999px; --bd0:1px solid rgba(255,255,255,.055); --bd1:1px solid rgba(167,139,250,.14); --bd2:1px solid rgba(167,139,250,.30); --bdlive:1px solid #7C5CFF; /* elevación neutra · glow es estado, no profundidad */ --el1:0 1px 2px rgba(0,0,0,.6),0 2px 8px -2px rgba(0,0,0,.5); --el2:0 4px 12px -4px rgba(0,0,0,.7),0 16px 40px -20px rgba(0,0,0,.8); --el3:0 8px 24px -8px rgba(0,0,0,.75),0 40px 90px -40px rgba(0,0,0,.9); --glow-v:0 0 0 1px rgba(124,92,255,.35),0 12px 40px -12px rgba(124,92,255,.55); --glow-ok:0 0 0 1px rgba(52,211,153,.40),0 10px 34px -14px rgba(52,211,153,.50); /* movimiento — nada supera 900ms si no está scrubbeado */ --e-out:cubic-bezier(.22,1,.36,1); --e-inout:cubic-bezier(.65,0,.35,1); --e-snap:cubic-bezier(.2,.9,.1,1); --d1:120ms; --d2:220ms; --d3:420ms; --d4:900ms; --maxw:1320px; /* vidrio esmerilado: fondo translúcido, borde de luz arriba y desenfoque detrás */ --glass:rgba(255,255,255,.058); --glass-hi:rgba(255,255,255,.085); --glass-brd:rgba(255,255,255,.10); --glass-brd-hi:rgba(199,182,255,.26); --glass-blur:blur(20px) saturate(160%); --glass-in:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.28); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--s0);color:var(--t2); font-family:var(--fs);font-size:var(--fz-body);font-weight:400; font-variation-settings:'wdth' 100;line-height:1.62; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{max-width:100%;display:block} a{color:var(--v2);text-decoration:none} a:hover{color:var(--v1)} ::selection{background:var(--v4);color:var(--t1)} :focus-visible{outline:2px solid #C3B4FF;outline-offset:3px;border-radius:inherit} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--v4);color:var(--t1); padding:12px 20px;border-radius:0 0 var(--r2) 0;font:500 13px/1 var(--fm)} .skip:focus{left:0} /* ── fondo global ───────────────────────────────────────────────── Todo se mueve con transform (compositor). Nada re-rasteriza gradientes a pantalla completa por cuadro. */ .bg{position:fixed;left:-25%;top:-25%;width:150%;height:150%;z-index:-4;pointer-events:none; will-change:transform;transform:translate3d(0,0,0); background: radial-gradient(38% 38% at 30% 26%,rgba(124,92,255,.17),transparent 68%), radial-gradient(42% 42% at 70% 74%,rgba(42,14,122,.24),transparent 70%); animation:aur 34s var(--e-inout) infinite alternate} @keyframes aur{to{transform:translate3d(6%,5%,0) scale(1.12)}} .bg-grid{position:fixed;inset:-2px;z-index:-3;pointer-events:none; background-image: linear-gradient(rgba(167,139,250,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(167,139,250,.055) 1px,transparent 1px); background-size:72px 72px; -webkit-mask:radial-gradient(120% 90% at 50% 8%,#000 0%,rgba(0,0,0,.55) 45%,transparent 88%); mask:radial-gradient(120% 90% at 50% 8%,#000 0%,rgba(0,0,0,.55) 45%,transparent 88%)} .bg-dots{position:fixed;inset:-40px;z-index:-3;pointer-events:none;opacity:.30; will-change:transform; background-image:radial-gradient(circle at center,rgba(167,139,250,.26) 1px,transparent 1.1px); background-size:34px 34px; -webkit-mask:radial-gradient(100% 80% at 70% 30%,#000 0%,transparent 78%); mask:radial-gradient(100% 80% at 70% 30%,#000 0%,transparent 78%); animation:dots 44s linear infinite} @keyframes dots{to{transform:translate3d(26px,26px,0)}} .bg-scan{position:fixed;left:0;right:0;top:0;height:38vh;z-index:-3;pointer-events:none; will-change:transform,opacity; background:linear-gradient(180deg,transparent,rgba(124,92,255,.055) 45%,rgba(167,139,250,.09) 50%,rgba(124,92,255,.055) 55%,transparent); animation:scan 19s var(--e-inout) infinite} @keyframes scan{0%{transform:translate3d(0,-42vh,0);opacity:0} 12%{opacity:1}88%{opacity:1}100%{transform:translate3d(0,102vh,0);opacity:0}} /* grano: estático y sin blend, para no forzar recomposición del árbol entero */ .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.028; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} @media (max-width:900px){.grain,.bg-scan{display:none}.bg-dots{opacity:.22}} .sec.alt::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(90deg,rgba(167,139,250,.05) 1px,transparent 1px); background-size:72px 100%; -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent); mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)} .sec.alt>.in{position:relative;z-index:1} /* ── riel de progreso: violeta → verde ────────────────────────── */ .rail{position:fixed;right:0;top:0;width:2px;height:100vh;z-index:60;background:rgba(255,255,255,.05)} .rail i{display:block;width:100%;height:100%;transform-origin:top;transform:scaleY(0); background:var(--grad-verdict);box-shadow:0 0 12px rgba(124,92,255,.6); animation:railgrow linear;animation-timeline:scroll(root block)} @keyframes railgrow{to{transform:scaleY(1)}} @media (max-width:640px){.rail{display:none}} /* ── nav ──────────────────────────────────────────────────────── */ .nav{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;gap:var(--sp4); padding:14px clamp(18px,4vw,44px); background:rgba(7,7,13,.72);backdrop-filter:blur(14px) saturate(140%); border-bottom:var(--bd0);transition:background var(--d2)} .brand{display:flex;align-items:center;gap:12px;color:var(--t1);flex:0 0 auto} .brand .mk{height:26px;width:auto;color:var(--t1);transition:color var(--d1)} .brand:hover .mk{color:var(--v2)} .brand b{font:600 13px/1 var(--fs);font-variation-settings:'wdth' 88;letter-spacing:.18em; text-transform:uppercase;display:block} .brand s{display:block;font:500 8.5px/1.5 var(--fm);letter-spacing:.34em;color:var(--t3); text-decoration:none;text-transform:uppercase} .navlinks{display:flex;gap:var(--sp4);margin-left:auto;align-items:center} .navlinks a{font:500 11px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--t3)} .navlinks a:hover{color:var(--t1)} @media (max-width:1000px){.navlinks a:not(.btn){display:none}} @media (max-width:420px){.brand s{display:none}} /* ── botones ──────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border:0;cursor:pointer; border-radius:var(--rp);background:var(--v4);color:var(--t1); font:500 12px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase; transition:transform var(--d1) var(--e-snap),box-shadow var(--d2),background var(--d2)} .btn:hover{background:#6a47ee;color:#fff;box-shadow:var(--glow-v);transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn.ghost{background:var(--glass);color:var(--t2); box-shadow:inset 0 0 0 1px rgba(167,139,250,.30),var(--glass-in)} .btn.ghost:hover{color:var(--t1);box-shadow:inset 0 0 0 1px var(--v3),var(--glow-v);background:var(--v-8)} .btn .ar{width:14px;height:14px;flex:0 0 auto;transition:transform var(--d2) var(--e-out)} .btn:hover .ar{transform:translateX(4px)} /* ── estructura de sección ────────────────────────────────────── */ main{position:relative;z-index:1} .sec{padding:var(--sp-sec) clamp(18px,4vw,44px);position:relative; content-visibility:auto;contain-intrinsic-size:auto 900px} .sec.alt{background:var(--s1);border-block:var(--bd0)} .in{max-width:var(--maxw);margin:0 auto;width:100%} .eyebrow{font:500 var(--fz-mono-xs)/1.4 var(--fm);letter-spacing:.22em;text-transform:uppercase; color:var(--v2);margin:0 0 var(--sp3)} .eyebrow.g{color:var(--ok)} h1,h2,h3,h4{color:var(--t1);margin:0 0 var(--sp3);text-wrap:balance} /* Titular de tesis: Oswald condensada — la voz display de la marca. Oswald no tiene itálica; el peso 400 ya lee sólido por lo angosta que es. */ .th{font-family:var(--fd);font-weight:400;font-size:var(--fz-h1); line-height:1.02;letter-spacing:-.02em} .th.big{font-size:var(--fz-hero);line-height:1} /* Titular estructural: Archivo condensado — registro de expediente */ .st{font-family:var(--fs);font-weight:700;font-size:var(--fz-h2); font-variation-settings:'wdth' 84;line-height:1.06;letter-spacing:-.022em} h3{font-size:var(--fz-h3);font-weight:700;font-variation-settings:'wdth' 94; line-height:1.18;letter-spacing:-.014em} h4{font-size:var(--fz-h4);font-weight:600;line-height:1.26;letter-spacing:-.008em} p{margin:0 0 var(--sp3);text-wrap:pretty} .lead{font-size:var(--fz-lead);line-height:1.58;color:var(--t2);max-width:68ch} .body{max-width:74ch} .dim{color:var(--t3)} .mono{font-family:var(--fm);font-size:var(--fz-mono-sm);letter-spacing:.02em} .num{font-variant-numeric:tabular-nums} .data{font-family:var(--fm);color:var(--v1);background:var(--v-8); padding:2px 7px;border-radius:var(--r1);font-size:.92em;text-transform:none;white-space:nowrap} .pullq{border-left:2px solid var(--v3);padding-left:var(--sp3);margin:var(--sp4) 0 0; font-weight:600;color:var(--t1);font-size:17px;line-height:1.5;max-width:62ch} /* ── reveal por scroll (0 ms de main thread) ──────────────────── */ .rv{animation:rv both linear;animation-timeline:view();animation-range:entry 4% cover 30%} @keyframes rv{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}} @supports not (animation-timeline:view()){.rv{opacity:1;translate:none;animation:none}} /* ── tarjetas y rejillas ──────────────────────────────────────── */ .grid{display:grid;gap:var(--sp4);min-width:0} .grid>*{min-width:0} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{position:relative;background:var(--glass);border:1px solid var(--glass-brd); border-radius:var(--r3);padding:var(--sp4); box-shadow:var(--el1),var(--glass-in); transition:background var(--d2),border-color var(--d2),box-shadow var(--d2),transform var(--d2) var(--e-out)} /* brillo especular en el borde superior, como una burbuja */ .card::before{content:'';position:absolute;left:14%;right:14%;top:0;height:1px;border-radius:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); opacity:.7;pointer-events:none} .card:hover{background:var(--glass-hi);border-color:var(--glass-brd-hi); box-shadow:var(--el2),var(--glass-in),0 0 0 1px rgba(167,139,250,.10);transform:translateY(-3px)} .card h3,.card h4{margin-bottom:var(--sp2)} .card p:last-child{margin-bottom:0} .card .idx{font:500 var(--fz-mono-xs)/1 var(--fm);letter-spacing:.2em;color:var(--v2); display:block;margin-bottom:var(--sp3)} /* ── semáforo: color + trazo + glifo (obligatorio) ────────────── */ .tag{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--rp); font:500 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap} .tag svg{width:11px;height:11px;flex:0 0 auto} .tag.ok{color:var(--ok);background:var(--ok-8);box-shadow:inset 0 0 0 1px var(--ok-24)} .tag.wait{color:var(--wait);background:var(--wait-8);box-shadow:inset 0 0 0 1px var(--wait-24)} .tag.no{color:var(--no);background:var(--no-8);box-shadow:inset 0 0 0 1px var(--no-24)} .tag.aim{color:var(--v2);background:var(--v-8);box-shadow:inset 0 0 0 1px var(--v-24)} .tag.nil{color:var(--t3);background:rgba(142,138,166,.08);box-shadow:inset 0 0 0 1px rgba(142,138,166,.2)} @media (max-width:620px){ .tag{white-space:normal;align-items:flex-start;line-height:1.45} .tag svg{margin-top:2px} } /* ── cifras ───────────────────────────────────────────────────── */ .stat{display:flex;flex-direction:column;gap:6px} .stat b{font:700 clamp(30px,3.7vw,52px)/1 var(--fs);font-variation-settings:'wdth' 78; color:var(--t1);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .stat b.g{color:var(--ok)} .stat b.v{color:var(--v2)} .stat s{text-decoration:none;font:500 10.5px/1.5 var(--fm);letter-spacing:.16em; text-transform:uppercase;color:var(--t3)} .arrow-stat{display:inline-flex;align-items:baseline;gap:10px} .arrow-stat .from{color:var(--t3);position:relative} .arrow-stat .from::after{content:'';position:absolute;left:-4%;right:-4%;top:52%;height:2px; background:var(--no);opacity:.65;transform:rotate(-6deg)} .arrow-stat .to{color:var(--ok)} .arrow-stat i{color:var(--v3);font-style:normal;font-size:.5em} /* ── tabla antes / después ────────────────────────────────────── */ .ba{width:100%;border-collapse:collapse;font-size:15px} .ba th{text-align:left;font:500 10.5px/1.4 var(--fm);letter-spacing:.18em;text-transform:uppercase; color:var(--t3);padding:0 var(--sp3) var(--sp2);border-bottom:var(--bd0);vertical-align:bottom} .ba th.hb{color:var(--ok)} .ba td{padding:var(--sp3);border-bottom:var(--bd0);vertical-align:top;line-height:1.5} .ba tr:last-child td{border-bottom:0} .ba td.k{color:var(--t1);font-weight:600;width:19%;font-variation-settings:'wdth' 88} .ba td.a{color:var(--t3);width:38%} .ba td.b{color:var(--t2);width:43%;background:var(--ok-8); box-shadow:inset 2px 0 0 var(--ok-24)} .ba td.b strong{color:var(--ok);font-weight:600} @media (max-width:820px){ .ba,.ba tbody,.ba tr,.ba td{display:block;width:auto} .ba thead{display:none} .ba tr{border:var(--bd1);border-radius:var(--r2);margin-bottom:var(--sp3);overflow:hidden} .ba td{border-bottom:0;padding:var(--sp3)} .ba td.k{background:var(--s2);font-size:13px;letter-spacing:.04em} .ba td.a::before{content:'HOY';display:block;font:500 9.5px/1 var(--fm);letter-spacing:.2em; color:var(--t3);margin-bottom:6px} .ba td.b::before{content:'CON NUREQ';display:block;font:500 9.5px/1 var(--fm);letter-spacing:.2em; color:var(--ok);margin-bottom:6px} } /* ── panel apagado («lo que no te vamos a decir») ─────────────── */ .mute{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r3); box-shadow:var(--glass-in);padding:var(--sp5); max-width:74ch;margin-inline:auto;text-align:center} .mute .st{color:var(--t2)} .mute p{color:var(--t3)} /* ── formulario ───────────────────────────────────────────────── */ .form{display:grid;gap:var(--sp3);grid-template-columns:repeat(2,minmax(0,1fr))} .form .full{grid-column:1/-1} @media (max-width:620px){.form{grid-template-columns:1fr}} .f label{display:block;font:500 10.5px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase; color:var(--t3);margin-bottom:var(--sp2)} .f input,.f select,.f textarea{width:100%;background:var(--glass);color:var(--t1); border:1px solid var(--glass-brd);border-radius:12px;padding:13px 14px;font:400 15px/1.5 var(--fs); box-shadow:var(--glass-in); transition:border-color var(--d2),box-shadow var(--d2)} .f textarea{min-height:112px;resize:vertical} .f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--v3); box-shadow:0 0 0 3px var(--v-8)} .f input::placeholder,.f textarea::placeholder{color:#63637E} .f select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238E8AA6' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center} .hp{position:absolute!important;left:-9999px} .consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--t3);line-height:1.5} .consent input{width:17px;height:17px;flex:0 0 auto;margin-top:2px;accent-color:var(--v3)} .fmsg{font:500 12px/1.5 var(--fm);letter-spacing:.06em;min-height:1.4em} .fmsg.ok{color:var(--ok)} .fmsg.err{color:var(--no)} /* ── footer ───────────────────────────────────────────────────── */ .foot{background:var(--s1);border-top:var(--bd0);padding:var(--sp6) clamp(18px,4vw,44px) var(--sp5)} .foot .cols{display:flex;flex-wrap:wrap;gap:var(--sp5);justify-content:space-between; max-width:var(--maxw);margin:0 auto} .foot .mk{height:40px;color:var(--t1);opacity:.45} .foot nav{display:flex;flex-direction:column;gap:10px} .foot nav a,.foot nav span{font:400 13px/1.4 var(--fm);color:var(--t3)} .foot .legal{max-width:var(--maxw);margin:var(--sp5) auto 0;padding-top:var(--sp4); border-top:var(--bd0);font:400 12px/1.6 var(--fm);color:#63637E;display:flex; flex-wrap:wrap;gap:var(--sp3) var(--sp4);justify-content:space-between} /* ── accesibilidad de movimiento ──────────────────────────────── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important; transition-duration:1ms!important} .rv{opacity:1!important;translate:none!important} .rail i{transform:scaleY(1)} } /* ═══ HERO ══════════════════════════════════════════════════════ */ .hero{position:relative;min-height:100dvh;display:flex;align-items:center; padding:104px clamp(18px,4vw,44px) 92px;overflow:hidden} .hero .in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.34fr); gap:clamp(24px,4vw,64px);align-items:center} @media (max-width:980px){.hero .in{grid-template-columns:minmax(0,1fr);gap:var(--sp5)}} .hero-copy{position:relative;z-index:2;min-width:0} .hero .in{position:relative;z-index:1} .hero .th{margin-bottom:var(--sp3)} .hero .lead{max-width:52ch} .hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp3);margin-top:var(--sp5)} .hero-foot{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:var(--sp4); font:500 9.5px/1.8 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--t3)} .hero-foot span{white-space:nowrap;display:inline-flex;align-items:center;gap:14px} .hero-foot span::after{content:'';width:3px;height:3px;border-radius:50%;background:var(--v3);opacity:.7} .hero-foot span:last-child::after{display:none} /* la N vive DETRÁS del grafo: la investigación pasa adentro de la marca */ .screen::before{content:'';position:absolute;left:41.5%;top:50%;translate:-50% -50%; height:78%;aspect-ratio:688/1000;pointer-events:none;z-index:0; background:linear-gradient(148deg, rgba(199,182,255,.055) 0%,rgba(124,92,255,.032) 40%, rgba(124,92,255,.012) 68%,transparent 88%); background-size:100% 100%; -webkit-mask:url(/assets/nureq-logo.svg) center/contain no-repeat; mask:url(/assets/nureq-logo.svg) center/contain no-repeat; will-change:opacity;animation:markDrift 22s var(--e-inout) infinite alternate} @keyframes markDrift{from{opacity:.75}to{opacity:1.25}} .screen::after{content:'';position:absolute;left:41.5%;top:50%;translate:-50% -50%; height:78%;aspect-ratio:688/1000;pointer-events:none;z-index:0; background:linear-gradient(104deg,transparent 45%,rgba(223,214,255,.17) 50%,transparent 55%); background-size:320% 100%;background-position:200% 0; -webkit-mask:url(/assets/nureq-logo.svg) center/contain no-repeat; mask:url(/assets/nureq-logo.svg) center/contain no-repeat; animation:markShine 14s var(--e-inout) 3.5s infinite} @keyframes markShine{0%,80%{background-position:200% 0}100%{background-position:-130% 0}} #graph{position:relative;z-index:1; -webkit-mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%), linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%), linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} /* lienzo del grafo */ .gwrap{position:relative;min-width:0} @media (max-width:980px){ .gwrap{width:100%} .screen::before,.screen::after{left:50%} } #graph{width:100%;height:100%;display:block} #graph{position:relative;z-index:1; -webkit-mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%), linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%), linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} /* lienzo del grafo */ .gwrap{position:relative;min-width:0} @media (max-width:980px){ .gwrap{width:100%} .screen::before,.screen::after{left:50%} } #graph{width:100%;height:100%;display:block} @media (max-width:980px){ } /* ═══ INDICADOR DE BAJAR ══════════════════════════════════════ */ .scroller{position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:4; display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none; opacity:0;animation:scIn .8s var(--e-out) 2.9s forwards} @keyframes scIn{to{opacity:1}} .sc-l{width:1px;height:42px;background:rgba(167,139,250,.20);overflow:hidden;position:relative; border-radius:1px} .sc-l i{position:absolute;left:0;top:0;width:100%;height:44%;border-radius:1px; background:linear-gradient(180deg,transparent,var(--v3)); animation:scRun 1.9s var(--e-inout) infinite} @keyframes scRun{0%{transform:translateY(-110%)}60%,100%{transform:translateY(230%)}} .sc-t{font:500 9px/1 var(--fm);letter-spacing:.26em;text-transform:uppercase;color:var(--t3); transition:color var(--d2)} .scroller:hover .sc-t{color:var(--v1)} @media (max-width:980px){.scroller{display:none}} /* ═══ TIRA DE PRUEBA ════════════════════════════════════════════ */ .proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp4); padding-block:var(--sp5);border-block:var(--bd0)} @media (max-width:820px){.proof{grid-template-columns:repeat(2,1fr);gap:var(--sp4) var(--sp3)}} /* ═══ PASOS ═════════════════════════════════════════════════════ */ .steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp3);counter-reset:s} @media (max-width:1000px){.steps{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.steps{grid-template-columns:repeat(2,1fr)}} .step{position:relative;padding-top:var(--sp4);border-top:2px solid rgba(167,139,250,.18)} .step::before{counter-increment:s;content:'0' counter(s);position:absolute;top:-11px;left:0; background:var(--s0);padding-right:10px;font:500 var(--fz-mono-xs)/1 var(--fm); letter-spacing:.2em;color:var(--v2)} .sec.alt .step::before{background:var(--s1)} .step b{display:block;color:var(--t1);font-weight:600;font-size:17px; font-variation-settings:'wdth' 88;margin-bottom:6px} .step span{font-size:14px;color:var(--t3);line-height:1.5} /* ═══ EXPEDIENTE (caso conductor) ═══════════════════════════════ */ .file{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r3); overflow:hidden;box-shadow:var(--el3),var(--glass-in)} .file-h{display:flex;flex-wrap:wrap;gap:var(--sp3);align-items:center;padding:var(--sp3) var(--sp4); background:rgba(255,255,255,.05);border-bottom:1px solid var(--glass-brd)} .file-h .lbl{font:500 10px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)} .file-h .seed{font-family:var(--fm);font-size:14px;color:var(--v1);text-transform:none} .file-b{padding:var(--sp4)} .plan{display:grid;gap:var(--sp2);counter-reset:p;margin:0;padding:0;list-style:none} .plan li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp3);align-items:start; padding:var(--sp3);background:var(--s1);border:var(--bd0);border-radius:var(--r1)} .plan li::before{counter-increment:p;content:'0' counter(p);font:500 11px/1.6 var(--fm); letter-spacing:.12em;color:var(--v2)} .plan b{display:block;color:var(--t1);font-weight:600;font-size:15px;margin-bottom:3px} .plan span{font-size:14px;color:var(--t3);line-height:1.5} .plan.off li{opacity:.55} .plan.off li::before{color:var(--no)} /* cadena de pivoteo */ .chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:var(--sp4) 0 0} .chain .node{font-family:var(--fm);font-size:13px;padding:7px 12px;border-radius:var(--r1); background:var(--v-8);color:var(--v1);border:var(--bd1);white-space:nowrap} .chain .node.ok{background:var(--ok-8);color:var(--ok);border-color:var(--ok-24)} .chain svg{width:15px;height:9px;color:var(--v3);flex:0 0 auto} /* conclusión en tres bloques */ .verdicts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp3)} @media (max-width:860px){.verdicts{grid-template-columns:1fr}} .vb{padding:var(--sp4);border-radius:var(--r3);background:var(--glass); border:1px solid var(--glass-brd);box-shadow:var(--glass-in)} .vb.y{box-shadow:inset 3px 0 0 var(--ok)} .vb.m{box-shadow:inset 3px 0 0 var(--wait)} .vb.n{box-shadow:inset 3px 0 0 var(--no)} .vb h4{font:500 10.5px/1.5 var(--fm);letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--sp2)} .vb.y h4{color:var(--ok)} .vb.m h4{color:var(--wait)} .vb.n h4{color:var(--no)} .vb p{font-size:14.5px;color:var(--t2);margin:0;line-height:1.55} .seal{display:flex;align-items:center;gap:10px;margin-top:var(--sp4);padding-top:var(--sp3); border-top:var(--bd0);font:400 12px/1.5 var(--fm);color:var(--t3)} .seal b{color:var(--v1);font-weight:500} /* ═══ DIÁLOGO CON EL COPILOTO ═══════════════════════════════════ */ .chat{display:grid;gap:var(--sp3);max-width:820px;margin-inline:auto} .bub{padding:var(--sp3) var(--sp4);border-radius:var(--r3);max-width:86%;line-height:1.55;font-size:16px} .bub.me{justify-self:end;background:var(--glass);color:var(--t2); border:1px solid var(--glass-brd);box-shadow:var(--glass-in); border-bottom-right-radius:6px} .bub.ai{justify-self:start;background:rgba(124,92,255,.13);color:var(--t1); border:1px solid rgba(167,139,250,.24);box-shadow:var(--glass-in); border-bottom-left-radius:6px} .bub s{display:block;text-decoration:none;font:500 9.5px/1 var(--fm);letter-spacing:.2em; text-transform:uppercase;margin-bottom:8px;color:var(--t3)} .bub.ai s{color:var(--v2)} /* ═══ MURO DE FUENTES ═══════════════════════════════════════════ */ .wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(11px,1fr));gap:5px; margin-top:var(--sp4);max-width:900px} .wall i{aspect-ratio:1;border-radius:1px;background:rgba(142,138,166,.16); transition:background var(--d3) var(--e-out),box-shadow var(--d3)} .wall i.on{background:var(--v3)} .wall i.done{background:rgba(52,211,153,.30)} .wall i.on{background:var(--ok);box-shadow:0 0 9px rgba(52,211,153,.75)} .fams{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-top:var(--sp4)} .fams span{font:400 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase; color:var(--t3);padding:6px 11px;border:var(--bd0);border-radius:var(--rp)} .cycle{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp3);margin-top:var(--sp5)} @media (max-width:900px){.cycle{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.cycle{grid-template-columns:1fr}} /* ═══ PIVOTE (tres actos) ═══════════════════════════════════════ */ .pivot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp4);align-items:center; position:relative} @media (max-width:860px){.pivot{grid-template-columns:1fr}} .pcard{background:var(--s2);border:var(--bd1);border-radius:var(--r2);padding:var(--sp4); box-shadow:var(--el1);transition:box-shadow var(--d3) var(--e-snap),border-color var(--d3)} .pcard .src{font:500 10px/1.5 var(--fm);letter-spacing:.16em;text-transform:uppercase; color:var(--t3);margin-bottom:var(--sp2)} .pcard .val{font-family:var(--fm);font-size:15px;color:var(--v1);margin-bottom:var(--sp3); word-break:break-all} .pcard.mid{border-color:var(--wait-24)} .pivot.solved .pcard.mid{border-color:var(--ok);box-shadow:var(--glow-ok)} .pcard .why{font-size:14px;color:var(--t3);line-height:1.5;max-height:0;overflow:hidden; opacity:0;transition:max-height var(--d4) var(--e-out),opacity var(--d3),margin var(--d3)} .pivot.solved .pcard.mid .why{max-height:140px;opacity:1;margin-top:var(--sp3)} /* ═══ CASOS DE ÉXITO (placeholder) ══════════════════════════════ */ .case{position:relative;background:var(--glass);border:1px solid var(--glass-brd); border-radius:var(--r3);box-shadow:var(--glass-in); padding:var(--sp4);display:flex;flex-direction:column;gap:var(--sp3)} .case .stamp{position:absolute;top:var(--sp3);right:var(--sp3);font:500 9.5px/1 var(--fm); letter-spacing:.2em;text-transform:uppercase;color:var(--t3); border:1px dashed rgba(142,138,166,.35);border-radius:var(--r1);padding:5px 9px} .case .meta{display:flex;flex-wrap:wrap;gap:var(--sp2);font:400 10.5px/1 var(--fm); letter-spacing:.12em;text-transform:uppercase;color:var(--t3)} .case .meta b{color:var(--v2);font-weight:500} .case dl{margin:0;display:grid;gap:var(--sp3)} .case dt{font:500 9.5px/1.4 var(--fm);letter-spacing:.18em;text-transform:uppercase; color:var(--t3);margin-bottom:5px} .case dd{margin:0;font-size:14.5px;color:var(--t2);line-height:1.5} .case .ph{color:#63637E;font-style:italic} .case .lim{margin-top:auto;padding-top:var(--sp3);border-top:var(--bd0)} .case .lim dt{color:var(--no)} /* ═══ QUIÉNES SOMOS ═════════════════════════════════════════════ */ .notus{margin-top:var(--sp5);padding:var(--sp4);background:var(--glass); border:1px solid var(--glass-brd);border-radius:var(--r3);box-shadow:var(--glass-in)} .notus ul{margin:var(--sp3) 0 0;padding:0;list-style:none;display:grid;gap:10px} .notus li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start; font-size:15px;color:var(--t2)} .notus li svg{width:13px;height:13px;color:var(--no);margin-top:5px;flex:0 0 auto} /* ═══ CIERRE ════════════════════════════════════════════════════ */ .close{text-align:center} .close .th{max-width:18ch;margin-inline:auto} .deliver{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp3);margin:var(--sp5) 0 0} @media (max-width:700px){.deliver{grid-template-columns:repeat(2,1fr)}} .deliver div{padding:var(--sp3);border:1px solid var(--glass-brd);border-radius:var(--r2); background:var(--glass);box-shadow:var(--glass-in);} .deliver b{display:block;font:500 var(--fz-mono-xs)/1 var(--fm);letter-spacing:.2em; color:var(--v2);margin-bottom:8px} .deliver span{font-size:14px;color:var(--t2)} /* ═══ ENTRADA ══════════════════════════════════════════════════ */ #intro{position:fixed;inset:0;z-index:300;background:#05050A;overflow:hidden; animation:iout .75s var(--e-out) 4.85s forwards} #introfx{position:absolute;inset:0;width:100%;height:100%} @keyframes iout{to{opacity:0;visibility:hidden}} html.intro-on{overflow:hidden} html.no-intro #intro{display:none} @media (prefers-reduced-motion:reduce){#intro{display:none}} /* ═══ MÁQUINA DE ESCRIBIR (sin caja, flujo inline) ═════════════ */ .konsole{display:block;margin:0 0 var(--sp5);max-width:52ch; font:500 clamp(12px,1.05vw,14.5px)/1.75 var(--fm);letter-spacing:.03em; color:var(--t2);min-height:6.9em} .k-dot{display:none} .k-key{font-size:.74em;letter-spacing:.2em;color:var(--v2);transition:opacity var(--d2)} .k-key::after{content:'·';margin:0 8px 0 9px;color:var(--t3)} .k-txt b{color:var(--t1);font-weight:600} .k-txt em{font-style:normal;color:var(--ok);font-weight:600} .k-cur{display:inline-block;width:.55em;height:1.02em;vertical-align:-.16em;margin-left:2px; background:var(--v3);box-shadow:0 0 10px rgba(124,92,255,.85); animation:kcur 1.05s steps(2,start) infinite} @keyframes kcur{50%{opacity:0}} @media (max-width:980px){.konsole{min-height:8.6em;max-width:100%}} /* ═══ NOTEBOOK ═══════════════════════════════════════════════════ El grafo corre adentro de la pantalla, como en el panel real. */ .laptop{position:relative;width:100%;perspective:1500px;perspective-origin:50% 100%} .lid{position:relative;border-radius:14px 14px 5px 5px;padding:13px 13px 17px; transform-origin:50% 100%;transform:rotateX(-78deg);opacity:0; will-change:transform,opacity; background:linear-gradient(168deg,#191926 0%,#101019 42%,#0b0b12 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(167,139,250,.13), 0 2px 0 rgba(0,0,0,.5), 0 40px 60px -24px rgba(0,0,0,.72)} html.booted .lid{animation:lidOpen 1.35s cubic-bezier(.19,.9,.24,1) forwards} /* al terminar se saca el contexto 3D: si queda, el lienzo se rasteriza borroso */ .lid.abierta{transform:none!important;will-change:auto;animation:none!important;opacity:1} @keyframes lidOpen{ 0%{transform:rotateX(-78deg);opacity:0} 18%{opacity:1} 72%{transform:rotateX(4.5deg)} 100%{transform:rotateX(0deg);opacity:1}} .screen{filter:brightness(.16) saturate(.5)} .screen.lista{filter:none!important;animation:none!important} html.booted .screen{animation:scrOn 1.5s var(--e-out) .34s forwards} @keyframes scrOn{0%{filter:brightness(.16) saturate(.5)} 20%{filter:brightness(1.14) saturate(.9)} 30%{filter:brightness(.62) saturate(.8)} 48%{filter:brightness(1.06) saturate(1)} 100%{filter:brightness(1) saturate(1)}} @media (prefers-reduced-motion:reduce){ .lid{transform:none;opacity:1;animation:none!important} .screen{filter:none;animation:none!important} } .cam{position:absolute;left:50%;top:6px;translate:-50% 0;width:4px;height:4px;border-radius:50%; background:#23233a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 5px rgba(124,92,255,.35)} .cam::after{content:'';position:absolute;inset:1.2px;border-radius:50%; background:#5b6; opacity:.5; animation:camOn 4.6s var(--e-inout) infinite} @keyframes camOn{0%,88%{opacity:.16}94%{opacity:.75}100%{opacity:.16}} .screen{position:relative;aspect-ratio:16/10.2;border-radius:5px;overflow:hidden; background:radial-gradient(120% 100% at 42% 46%,#0c0a1a 0%,#07070D 62%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.85), inset 0 0 34px rgba(0,0,0,.55)} #graph{position:absolute;inset:0;width:100%;height:100%;z-index:1; -webkit-mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%), linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%), linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} /* reflejo del vidrio */ .glare{position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(114deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.018) 26%, transparent 46%,transparent 100%)} .glare::after{content:'';position:absolute;inset:0; background:linear-gradient(114deg,transparent 40%,rgba(199,182,255,.05) 50%,transparent 60%); background-size:250% 100%;background-position:190% 0; animation:glareSweep 11s var(--e-inout) 4s infinite} @keyframes glareSweep{0%,74%{background-position:190% 0}100%{background-position:-90% 0}} /* base: bisagra, cubierta y labio frontal */ .deck{position:relative;height:17px;margin:0 auto;width:114%;left:-7%; border-radius:0 0 13px 13px; background:linear-gradient(180deg,#3a3a52 0%,#2a2a3c 16%,#1b1b28 52%,#101018 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 3px rgba(0,0,0,.6), 0 18px 30px -12px rgba(0,0,0,.85); clip-path:polygon(1.8% 0,98.2% 0,100% 100%,0 100%)} .deck::before{content:'';position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,rgba(167,139,250,.35) 18%, rgba(199,182,255,.55) 50%,rgba(167,139,250,.35) 82%,transparent)} .deck::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px; border-radius:0 0 13px 13px; background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(255,255,255,.07))} .deck .pad{position:absolute;left:50%;top:0;translate:-50% 0;width:17%;height:4px; border-radius:0 0 5px 5px;background:rgba(6,6,12,.72); box-shadow:inset 0 -1px 0 rgba(255,255,255,.10)} @media (max-width:980px){ .lid{padding:9px 9px 12px;border-radius:11px 11px 4px 4px} .screen{aspect-ratio:16/13.5} .deck{height:12px;width:112%;left:-6%} } /* ═══ TARJETA: una por vez, rotando ═══════════════════════════ */ .gcards{position:absolute;right:11px;top:11px;width:min(230px,38%);z-index:3; pointer-events:none} .gc{position:relative;background:linear-gradient(180deg,rgba(30,26,54,.90),rgba(14,12,26,.90)); border:1px solid var(--glass-brd);border-radius:16px;padding:11px 13px; box-shadow:var(--el3),var(--glass-in); opacity:0;translate:22px 0;scale:.95; transition:opacity .5s var(--e-out),translate .5s var(--e-out),scale .5s var(--e-out)} .gc.on{opacity:1;translate:0 0;scale:1} .gc.swap{opacity:0;translate:-14px 0;scale:.97;transition-duration:.32s} .gc::before{content:'';position:absolute;left:-20px;top:21px;width:20px;height:1px; background:linear-gradient(90deg,transparent,rgba(167,139,250,.6)); opacity:0;transition:opacity .5s var(--e-out) .18s} .gc.on::before{opacity:1} .gc::after{content:'';position:absolute;left:-23px;top:19px;width:5px;height:5px;border-radius:50%; background:var(--v3);box-shadow:0 0 9px rgba(124,92,255,.95); opacity:0;transition:opacity .5s var(--e-out) .24s} .gc.on::after{opacity:1} .gc header{display:flex;align-items:center;gap:6px;font:500 8px/1.3 var(--fm); letter-spacing:.15em;text-transform:uppercase;color:var(--t3);margin-bottom:6px} .gc header b{margin-left:auto;font-weight:500;color:var(--v1);text-transform:none; letter-spacing:.02em;font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56%} .gci{width:11px;height:11px;flex:0 0 auto;border-radius:2px;background:var(--v-24); box-shadow:inset 0 0 0 1px rgba(167,139,250,.5)} .gci.tg{border-radius:50%} .gci.fc{border-radius:3px} .gci.ch{transform:rotate(45deg)} .gci.co{border-radius:1px} .gci.lk,.gci.sa{border-radius:50% 2px 50% 2px} .gci.in{border-radius:2px 50% 2px 50%} .gci.pr{border-radius:1px} .gci.gr{border-radius:50%} .gc footer{margin-top:6px;padding-top:5px;border-top:var(--bd0); font:400 8px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#63637E} .gc-msg{display:grid;gap:3px} .gc-msg span{font:400 9px/1.4 var(--fm);color:var(--t2);background:var(--s3); padding:4px 6px;border-radius:7px 7px 7px 2px;justify-self:start;max-width:94%} .gc-msg span.me{justify-self:end;border-radius:7px 7px 2px 7px;background:var(--v-8);color:var(--v1)} .gc-list{list-style:none;margin:0;padding:0;display:grid;gap:3px} .gc-list li{display:flex;align-items:center;gap:6px;font:400 9px/1.35 var(--fm);color:var(--t2)} .gc-list li span{margin-left:auto;color:#63637E;font-size:8px;text-transform:uppercase;letter-spacing:.1em} .gc-list em{width:5px;height:5px;border-radius:50%;flex:0 0 auto} .gc-list em.ok{background:var(--ok);box-shadow:0 0 6px rgba(52,211,153,.8)} .gc-list em.wait{background:var(--wait)} .gc-list em.no{background:var(--no)} .gc-faces{display:flex;gap:6px} .gc-faces figure{margin:0;position:relative;flex:1 1 0;min-width:0} .gc-faces img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 26%; display:block;border-radius:4px;image-rendering:pixelated;filter:saturate(.9) contrast(1.06); outline:1px solid rgba(167,139,250,.25);outline-offset:-1px} .gc-faces figcaption{position:absolute;right:2px;bottom:2px;font:500 7.5px/1 var(--fm); color:var(--ok);background:rgba(7,7,13,.82);padding:2px 3px;border-radius:2px} .gc-hop{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .gc-hop span{font:400 9px/1 var(--fm);color:var(--v1);background:var(--v-8); padding:4px 5px;border-radius:3px;white-space:nowrap} .gc-hop span.alert{color:var(--no);background:var(--no-8)} .gc-hop i{width:9px;height:1px;background:var(--v3);flex:0 0 auto} .gc-rows{list-style:none;margin:0;padding:0;display:grid;gap:3px} .gc-rows li{display:flex;gap:8px;font:400 8.5px/1.35 var(--fm)} .gc-rows li span{color:#63637E} .gc-rows li b{margin-left:auto;color:var(--t2);font-weight:500} .gc-rows li b.hot{color:var(--no)} @media (max-width:980px){ .gcards{right:7px;top:7px;width:min(190px,46%)} .gc{padding:7px 8px} .gc::before,.gc::after{display:none} } @media (prefers-reduced-motion:reduce){.gc{opacity:1;translate:none;scale:1}} /* Sin soporte de backdrop-filter, el vidrio se rellena para no quedar ilegible */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .card,.mute,.vb,.notus,.case,.file,.gc,.deliver div,.bub.me,.btn.ghost, .f input,.f select,.f textarea{background:var(--s2)} .bub.ai{background:#1a1430} } /* ═══ REESCRITURA S03→S17 · ajustes mínimos ═════════════════════ Sólo lo que la reescritura rompe. Todo con tokens ya existentes. Va AL FINAL de /opt/nureq-web/site/info/assets/nureq.css (el orden importa: estas reglas ganan por posición, no por peso). */ /* Los pasos ya no son 6: son 4 (el motor) y 3 (la prueba). Con repeat(6,…) fijo quedaban columnas huecas. */ .steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} @media (max-width:560px){.steps{grid-template-columns:1fr}} /* La tira del ahorro pasó de 4 cifras a 3 pares con flecha. */ .proof.p3{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:820px){.proof.p3{grid-template-columns:1fr}} /* Tabla de cobertura: dos columnas y SIN columna verde (el verde es para hechos probados, no para decorar una tabla). */ .ba.cov td.k{width:32%} .ba.cov td.q{color:var(--t2)} @media (max-width:820px){ /* apilada, .ba td.k conservaba su ancho en % —gana en especificidad sobre el width:auto de la media query— y quedaba una banda angosta */ .ba.cov td.k{width:auto} /* con el oculto, la 2ª celda necesita su propio rótulo, igual que .ba td.a/.b en la tabla anterior */ .ba.cov td.q::before{content:'QUÉ CONTESTA';display:block;font:500 9.5px/1 var(--fm); letter-spacing:.2em;color:var(--t3);margin-bottom:6px} } /* El «por qué» del pivote ocupa dos renglones en pantalla ancha y cuatro en columna única: 140px lo cortaba a media frase. */ .pivot.solved .pcard.mid .why{max-height:260px} /* Preguntas frecuentes: el «No.» que abre cada respuesta tiene que leerse. */ .card p.dim strong{color:var(--t1);font-weight:600} /* ═══════════════════════════════════════════════════════════════════ 01 · CÓMO SE ARMA UN CASO — la banda del grafo Apendear al FINAL de nureq.css. No usa .sec, así que no hereda ni el relleno ni el content-visibility: es una banda a sangre. ═══════════════════════════════════════════════════════════════════ */ /* 0,76 de pantalla y no 1: si toma el monitor entero deja de leerse como una página y pasa a ser una presentación. El tope de 780 px evita que en un monitor alto la banda se vuelva un pozo. */ .mt{position:relative;width:100%; height:clamp(460px,76vh,780px); background:var(--s0);overflow:hidden; border-block:var(--bd0)} /* La imagen del marcado ES la capa apagada mientras el script no arranca. El filtro replica exactamente el de la primera capa del lienzo, así el relevo no se nota. object-fit:cover encuadra igual que la función encuadre() del script. */ .mt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:brightness(.30) saturate(.35) blur(1.1px); transition:opacity .28s linear} /* opacidad y no hidden: el alt tiene que seguir en el árbol de accesibilidad cuando el lienzo toma el relevo. */ .mt.viva .mt-img{opacity:0} .mt-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block} /* el grano del sitio: nada nace perfectamente limpio */ .mt-grano{position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} /* los cuatro bordes caen dentro del fondo de la página: es una ventana, no una foto pegada */ .mt-vineta{position:absolute;inset:0;pointer-events:none; background: radial-gradient(130% 100% at 50% 46%,transparent 34%,rgba(7,7,13,.42) 72%,rgba(7,7,13,.94) 100%), linear-gradient(180deg,rgba(7,7,13,.72) 0%,transparent 22%,transparent 62%,rgba(7,7,13,.86) 100%)} /* la capa de texto no intercepta el puntero salvo el botón. El relleno va AFUERA y la medida ADENTRO, igual que .sec > .in: con las dos cosas en el mismo elemento el relleno se suma al centrado y el texto queda corrido respecto de la columna del resto del sitio (medido: 52 px a 1512, 31 px a 1366). */ .mt-cap{position:absolute;inset:0;pointer-events:none; padding:clamp(22px,4vh,46px) clamp(18px,4vw,44px)} .mt-in{max-width:var(--maxw);margin:0 auto;height:100%; display:grid;grid-template-rows:auto 1fr auto;gap:var(--sp3)} .mt-eyebrow{font:500 var(--fz-mono-xs)/1.4 var(--fm);letter-spacing:.22em;text-transform:uppercase; color:var(--v2);margin:0 0 10px} /* misma voz que .th (Oswald) pero un escalón por debajo del titular de una sección: es un rótulo sobre una imagen, no la tesis de un apartado. La sombra lo despega del grafo sin cajón de fondo. */ .mt-h{font-family:var(--fd);font-weight:400;font-size:clamp(23px,2.8vw,40px);line-height:1.04; letter-spacing:-.02em;color:var(--t1);margin:0;max-width:15ch;text-wrap:balance; text-shadow:0 2px 24px rgba(7,7,13,.85)} /* la explicación: tres líneas cortas, y cada una llega cuando en la imagen está pasando eso */ .mt-paso{align-self:end;max-width:40ch;opacity:0;transform:translateY(9px); transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)} .mt-paso.on{opacity:1;transform:none} .mt-paso .n{font:500 10.5px/1 var(--fm);letter-spacing:.2em;color:var(--v2); display:block;margin-bottom:9px} .mt-paso .t{margin:0;font-size:clamp(16px,1.55vw,20px);line-height:1.4;color:var(--t1); text-shadow:0 2px 20px rgba(7,7,13,.9)} .mt-pie{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp3); justify-content:space-between} .mt-sello{font:500 10px/1.6 var(--fm);letter-spacing:.14em;text-transform:uppercase; color:var(--t3);text-shadow:0 1px 14px rgba(7,7,13,.9)} .mt-otra{pointer-events:auto;border:0;cursor:pointer; background:rgba(255,255,255,.058);color:var(--t2);border-radius:var(--rp);padding:8px 16px; font:500 10px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); transition:color .22s,box-shadow .22s} .mt-otra:hover{color:var(--t1);box-shadow:inset 0 0 0 1px var(--v3)} /* el atributo hidden lo pisaría cualquier display declarado arriba: hay que declararlo o el botón se ve antes de tiempo */ .mt-otra[hidden]{display:none} @media (max-width:640px){ .mt-paso{max-width:none} .mt-h{max-width:18ch} } /* Sin movimiento: la banda se ve entera y encendida desde el principio, con el último paso escrito. No hay nada que perderse. */ @media (prefers-reduced-motion:reduce){ .mt-img,.mt-paso{transition:none} } /* ═══════════════════════════════════════════════════════════════════ NUREQ · BLOQUE 02 DE LA HOME — «LA AUDITORÍA EN VIVO» Reglas nuevas. Van AL FINAL de /opt/nureq-web/site/info/assets/nureq.css (el orden importa: .pd y .sec tienen la misma especificidad, así que .pd sólo pisa a .sec si va después). PALETA: cero valores de color inventados. Todo sale de los tokens de :root — superficies, texto, violeta, semáforo, vidrio y bordes. Los únicos literales del bloque son los #000 de las máscaras, que son opacidad y no color. MEJORA PROGRESIVA, Y AL DERECHO. El HTML sale con la clase .pd-est puesta: sin JavaScript el bloque es un DOCUMENTO ESTÁTICO COMPLETO — los veintisiete renglones visibles, las dos fichas abiertas, los tres actos desplegados y CERO riel de scroll—. El motor la saca recién cuando terminó de arrancar, y se la vuelve a poner si el visitante activa «menos movimiento» o abre una ventana muy baja. Antes el registro nacía en opacity:0 y sólo el JS lo levantaba: si el archivo fallaba o tardaba, veintisiete renglones de texto quedaban invisibles y la única salida era un media query. Prefijos .pd- / #pdg / #poda: verificados con grep contra nureq.css, contra los @keyframes existentes y contra los id de las 8 páginas. ═══════════════════════════════════════════════════════════════════ */ /* ── el contenedor y su recorrido ───────────────────────────────── .sec trae content-visibility:auto (nureq.css ~178). Esta sección mide 270svh: el navegador la estimaría en los 900px de contain-intrinsic-size y corregiría de golpe al acercarse, con un salto de la barra de scroll que arruina el primer segundo. Se DESACTIVA la contención; poner un contain-intrinsic-size acá no serviría de nada porque sin contención de tamaño esa propiedad es inerte. --pd-cer es EL CONTRATO entre las dos mitades: la ceremonia de un nodo —el glow que muere, la desaturación, la cruz que crece— y el filo del renglón que le corresponde duran exactamente lo mismo, y el JS lee este mismo número con getComputedStyle. Si acá cambia, cambia allá. Un renglón que llega tarde respecto de su nodo destruye la tesis de la pieza, y el desfase no tira ningún error. */ .pd{position:relative;padding:0;content-visibility:visible; --pd-cer:340ms;--pd-fade:200ms} /* svh, NUNCA vh ni dvh. Con dvh la altura cambia cuando entra y sale la barra de URL del navegador móvil, y como el recorrido es «alto de la sección menos alto del sticky», el DENOMINADOR DEL PROGRESO cambiaría en medio del scroll: el progreso salta y puede RETROCEDER mientras el dedo sigue bajando. Se reporta como «se ve raro en el celular». 130svh y no 260 ni 170: con el MODELO POR PASOS el riel ya no separa eventos. Un paso se reproduce entero en su propio reloj, con la rueda quieta, así que el recorrido sólo tiene que alcanzar para ELEGIR uno de los doce pasos y nada más. El número se calcula de abajo hacia arriba: doce umbrales repartidos en trece fracciones iguales dan una banda de 90 px en 900 de alto, 83 px en un portátil de 768 y 117 px en un monitor de 1080. Una muesca de rueda de Chrome son 100 px: una muesca ejecuta un paso, y donde la muesca alcanza para dos, el motor clava el intermedio en su estado final y reproduce el último entero, que es exactamente el contrato. La histéresis vive en el JS y está declarada en PÍXELES —media muesca de rueda como piso—: en fracción del riel valdría la mitad en un portátil y el doble en un monitor alto, sin que nadie lo note. */ .pd-riel{height:130svh;pointer-events:none} /* El sticky se encuadra como el resto del sitio: --maxw centrado. Sin esto, en un monitor de 2560px el bloque sangra de borde a borde mientras toda la home vive dentro de 1320. */ .pd-viz{--pd-luz:1; position:sticky;top:0;height:100svh; max-width:var(--maxw);margin-inline:auto; display:grid; grid-template-columns:minmax(0,56fr) minmax(0,44fr); grid-template-rows:minmax(0,1fr) auto; column-gap:var(--sp4);row-gap:var(--sp3); align-items:center;padding:92px clamp(18px,4vw,44px) var(--sp4)} .pd-viz>*{min-width:0;min-height:0} /* ── salida y avance ───────────────────────────────────────────── Casi dos pantallas de scroll pineado sin señal de avance ni ancla de salida es una trampa. El enlace salta al final de la propia sección y la barra dice cuánto falta. La barra va en LAS DOS anchuras: dejarla sólo en el teléfono ponía la trampa justo donde el recorrido es más largo, y el argumento del comentario se contradecía con la regla que tenía abajo. El enlace va a opacidad plena y a --t2: a .7 sobre --t3 medía 3.5:1, que es un incumplimiento de WCAG en la salida de emergencia de accesibilidad, que es el peor lugar posible. */ .pd-skip{position:absolute;z-index:5;right:clamp(18px,4vw,44px);top:74px; padding:7px 13px;border-radius:var(--rp); background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-brd),var(--glass-in); font:500 10px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase; color:var(--t2); transition:color var(--d2),box-shadow var(--d2)} .pd-skip:hover,.pd-skip:focus-visible{color:var(--t1); box-shadow:inset 0 0 0 1px var(--v3),var(--glass-in)} /* la barra va ABAJO del sticky y no arriba: arriba queda detrás de la barra de navegación, que es fija y opaca. */ .pd-prog{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:5; background:var(--glass);display:block} .pd-prog i{display:block;height:100%;width:100%;transform:scaleX(0); transform-origin:left;background:var(--grad-verdict)} .pd-fin{display:block;height:1px} /* ── el lienzo ─────────────────────────────────────────────────── La máscara cruzada es la misma de #graph en el hero: firma de familia, y además resuelve gratis los bordes (nada entra ni sale por un canto). Las rampas bajan de 6%/5% a 2.6%/2.4%: con las anteriores, en un lienzo de 800px la rampa medía 48px y el chasis del instrumento se dibujaba DENTRO de ella, a un 62% de opacidad y distinto en cada esquina; la leyenda de estados —la única clave de la gramática cromática de la pieza— quedaba en 2.9:1. Los corchetes y la leyenda ahora caen por fuera de la rampa en todo el rango de anchos. El grano es el mismo de .grain: el lienzo es la única superficie del sitio que quedaría sin textura, y se leería «digital» al lado del resto. Baja a .02, porque el fondo perdió dos capas de atmósfera y el grano ya no compite con ellas. */ .pd-lienzo{grid-column:1;grid-row:1;align-self:center;position:relative;margin:0; width:100%;aspect-ratio:16/11;max-height:min(74svh,100%)} #pdg{position:absolute;inset:0;width:100%;height:100%;display:block; touch-action:pan-y;cursor:grab;border-radius:var(--r2); -webkit-mask:linear-gradient(90deg,transparent 0,#000 2.6%,#000 97.4%,transparent 100%), linear-gradient(180deg,transparent 0,#000 2.4%,#000 97.6%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 2.6%,#000 97.4%,transparent 100%), linear-gradient(180deg,transparent 0,#000 2.4%,#000 97.6%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} #pdg:focus-visible{outline:2px solid var(--v1);outline-offset:2px} .pd-lienzo::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.02; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask:linear-gradient(90deg,transparent 0,#000 2.6%,#000 97.4%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 2.6%,#000 97.4%,transparent 100%)} /* ── el registro ───────────────────────────────────────────────── overflow:hidden, NO overflow:auto. El
    se traslada con transform calculado desde JS. Dos scrolls anidados en un teléfono es el peor resultado posible: el usuario no sabe cuál está moviendo. --pd-luz lo escribe el mismo requestAnimationFrame que pinta el lienzo: durante el apagón del homoglifo la mesa entera baja a 0.10 y el panel tiene que bajar con ella, o el momento más caro de la pieza se lo roba una lista de texto a pleno brillo. El piso sube de .22 a .34: el apagón dejaba al panel en 0.30 y a los veintisiete renglones ilegibles, y ése es un estado en el que el visitante SE PUEDE DETENER. El lienzo sigue bajando a 0.10; el panel se aparta, no se apaga. */ .pd-log{grid-column:2;grid-row:1/3;align-self:center; position:relative;display:flex;flex-direction:column; height:min(76svh,660px); background:var(--s2);border:var(--bd1);border-radius:var(--r3); box-shadow:var(--el1),var(--glass-in); padding:var(--sp3) var(--sp4) 0;overflow:hidden; opacity:calc(.34 + .66*var(--pd-luz))} .pd-hd{display:flex;flex-wrap:wrap;align-items:center;gap:10px;row-gap:3px; flex:0 0 auto;padding-bottom:10px;border-bottom:var(--bd0)} .pd-ttl{font:500 9.5px/1.4 var(--fm);letter-spacing:.3em; text-transform:uppercase;color:var(--t3)} .pd-dot{width:5px;height:5px;border-radius:50%;background:var(--v3);flex:0 0 auto; box-shadow:var(--glow-v);opacity:.35; animation:pdPulse 2.6s var(--e-inout) infinite alternate} @keyframes pdPulse{to{opacity:1}} .pd-log.quieto .pd-dot{animation:none;opacity:1} .pd-log.cerrado .pd-dot{animation:none;opacity:1;background:var(--ok); box-shadow:var(--glow-ok)} .pd-cnt{margin-left:auto;font:500 9.5px/1.5 var(--fm);letter-spacing:.1em; text-transform:uppercase;color:var(--t3);white-space:nowrap; font-variant-numeric:tabular-nums} .pd-clk{font:500 10.5px/1.5 var(--fm);letter-spacing:.06em;color:var(--v2); font-variant-numeric:tabular-nums;flex:0 0 auto} /* el dígito que cambia hace un destello violeta: un registro forense merece que el número se mueva. Dos animaciones idénticas que se alternan, para reiniciarla sin forzar un reflow por cambio. */ .pd-cnt.t1{animation:pdTicA 300ms var(--e-out)} .pd-cnt.t2{animation:pdTicB 300ms var(--e-out)} .pd-clk.t1{animation:pdTicA 300ms var(--e-out)} .pd-clk.t2{animation:pdTicB 300ms var(--e-out)} @keyframes pdTicA{from{color:var(--v1)}} @keyframes pdTicB{from{color:var(--v1)}} /* entre 1181 y ~1300 px el contador crecía de una línea a dos y el cuerpo del registro perdía 14 px de alto sin que nada lo volviera a medir: el renglón vivo dejaba de aterrizar donde la fórmula dice. El JS ahora remide al cambiar el texto; el corte se adelanta a 1300 para que el rango ambiguo directamente no exista. */ @media (max-width:1300px){ .pd-cnt{flex:1 0 100%;order:4;margin-left:0;text-align:left;white-space:normal} } /* el cuerpo del registro, con su máscara de desvanecido arriba y abajo */ .pd-body{position:relative;flex:1 1 auto;min-height:0;overflow:hidden; -webkit-mask:linear-gradient(180deg,transparent 0,#000 7%,#000 89%,transparent 100%); mask:linear-gradient(180deg,transparent 0,#000 7%,#000 89%,transparent 100%)} /* NADA de transition sobre transform acá, y la prohibición sigue siendo correcta con el modelo por pasos: una transición CSS de 420ms dejaría el renglón escribiéndose medio segundo después del nodo que se apaga, y esa sincronía ES la pieza. El amortiguado del desplazamiento —que sí hace falta, porque un paso mueve la lista tres o cuatro renglones de golpe— vive en el JS, como seguidor por TIEMPO, y escribe translate3d para que el valor quede en el compositor y no reflowee el panel en cada cuadro. */ .pd-l{list-style:none;margin:0;padding:14px 0 0; will-change:transform;transform:translate3d(0,0,0)} .pd-l li{position:relative;display:grid; grid-template-columns:8ch 14px minmax(0,1fr);gap:10px;align-items:start; padding:7px 0 7px 13px;border-bottom:var(--bd0); opacity:0;transition:opacity var(--pd-fade) var(--e-out),background var(--d2) linear; font:400 12.5px/1.5 var(--fm);color:var(--t2)} .pd-l li.on{opacity:1} .pd-l li:last-child{border-bottom:0} .pd-l time{font:400 10px/1.7 var(--fm);color:var(--t3); font-variant-numeric:tabular-nums;white-space:nowrap} .pd-l .gi{width:11px;height:11px;margin-top:4px;flex:0 0 auto} .pd-l .gi.aim{color:var(--v2)} .pd-l .gi.ok{color:var(--ok)} .pd-l .gi.wait{color:var(--wait)} .pd-l .gi.no{color:var(--no)} .pd-l strong{color:var(--t1);font-weight:500} /* EL FILO IZQUIERDO — la firma del bloque. Nace violeta (la máquina habló) y vira al color del veredicto EXACTAMENTE cuando termina la ceremonia del nodo: retardo 38% de --pd-cer, duración 62%, así que aterriza en --pd-cer clavado. Repetido veintisiete veces enseña la gramática cromática sin una sola leyenda. Va a 3px y a color pleno: a 2px y alfa .45 medía 2:1 contra el panel y no llegaba al 3:1 que pide WCAG 1.4.11 para un indicador no textual. */ .pd-l li::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:3px; border-radius:1px;background:var(--v3); transition:background calc(var(--pd-cer)*.62) var(--e-out) calc(var(--pd-cer)*.38)} .pd-l li.on.f-no::before{background:var(--no)} .pd-l li.on.f-ok::before{background:var(--ok)} .pd-l li.on.f-wait::before{background:var(--wait)} .pd-l li.viva{background:var(--glass)} /* el puente entre las dos mitades: el renglón que corresponde al nodo que el visitante tiene bajo el puntero, y al revés */ .pd-l li.mira,.pd-l li[data-k]:hover{background:var(--v-8); box-shadow:inset 0 0 0 1px var(--v-24)} .pd-l li[data-k]{cursor:crosshair} /* veredictos en versalitas mono */ .pd-l .v{font-style:normal;font:500 10.5px/1 var(--fm);letter-spacing:.14em; text-transform:uppercase;white-space:nowrap} .pd-l .v.ok{color:var(--ok)} .pd-l .v.wait{color:var(--wait)} .pd-l .v.no{color:var(--no)} /* ── las dos fichas finales: patrón .vb del sitio ───────────────── IDÉNTICAS en ancho, alto, padding, radio, elevación, cuerpo tipográfico Y renglón meta. Cambia ÚNICAMENTE el color del filo interno de 3px. Mostrar lo no resuelto con exactamente la misma jerarquía que lo resuelto: si a la verde se le da un renglón de más, la doctrina se cae sola. */ .pd-l li.pd-card{border-bottom:0;padding:0 0 0 13px;margin:var(--sp3) 0; grid-template-columns:minmax(0,1fr);cursor:default} .pd-l li.pd-card>time,.pd-l li.pd-card>.gi{display:none} .pd-l li.pd-card::before{display:none} .pd-l li.pd-card.viva,.pd-l li.pd-card.mira{background:none;box-shadow:none} .pd-cb{padding:var(--sp3) var(--sp4);border-radius:var(--r3); background:var(--glass);border:1px solid var(--glass-brd); box-shadow:var(--el1),var(--glass-in),inset 3px 0 0 var(--v3); opacity:0;translate:0 10px; transition:opacity var(--d3) var(--e-out),translate var(--d3) var(--e-out), box-shadow var(--d3) var(--e-out)} .pd-l li.on .pd-cb{opacity:1;translate:0 0} .pd-l li.on.pd-card.ok .pd-cb{box-shadow:var(--el1),var(--glass-in),inset 3px 0 0 var(--ok)} .pd-l li.on.pd-card.wait .pd-cb{box-shadow:var(--el1),var(--glass-in),inset 3px 0 0 var(--wait)} .pd-cb h3{display:flex;align-items:center;gap:8px;margin:0 0 var(--sp2); font:500 10.5px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase; opacity:0;transition:opacity var(--d3) var(--e-out) .18s} .pd-l li.on .pd-cb h3{opacity:1} .pd-cb h3 svg{width:11px;height:11px;flex:0 0 auto} .pd-card.ok .pd-cb h3{color:var(--ok)} .pd-card.wait .pd-cb h3{color:var(--wait)} .pd-val{margin:0 0 var(--sp2);font-size:14px} .pd-why{margin:0;font:400 15px/1.55 var(--fs);color:var(--t2)} .pd-src{margin:var(--sp2) 0 0;font:400 11px/1.5 var(--fm);color:var(--t3); opacity:0;transition:opacity var(--d3) var(--e-out) .24s} .pd-l li.on .pd-src{opacity:1} /* el renglón meta, con su subrayado que se traza de izquierda a derecha y no se va nunca. Lo llevan LAS DOS fichas. */ .pd-meta{margin:10px 0 0;padding-left:13px; font:500 10px/1.5 var(--fm);color:var(--v2);opacity:.85} .pd-meta span{position:relative;display:inline-block} .pd-meta span::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px; background:var(--v3);transform:scaleX(0);transform-origin:left; transition:transform 600ms linear .32s} .pd-l li.on .pd-meta span::after{transform:scaleX(1)} /* pie del registro: aparece SÓLO cuando el caso cerró. A p=0 decía el desenlace encima de un contador que marcaba cero: la pieza se spoileaba a sí misma y se contradecía con su propio marcador. Ahora entra como el último elemento del paso once, 620 ms después del hueco vacío: es el remate de la carpeta, no un umbral aparte. */ .pd-ft{flex:0 0 auto;padding:10px 0 var(--sp3);border-top:var(--bd0); font:400 9.5px/1.5 var(--fm);letter-spacing:.06em;color:var(--t3); opacity:0;transition:opacity var(--d4) var(--e-out)} .pd-log.cerrado .pd-ft{opacity:1} /* el cursor: bloque violeta, y SÓLO con el dedo quieto. Un cursor titilando significa «esperando»; si el motor escribe, no espera. */ .pd-cur{position:absolute;right:var(--sp4);bottom:52px;width:7px;height:15px; background:var(--v3);opacity:0;box-shadow:var(--glow-v); pointer-events:none;transition:opacity var(--d1)} .pd-log.quieto .pd-cur{opacity:.85;animation:pdCur 1.05s steps(2,start) infinite} @keyframes pdCur{50%{opacity:0}} /* ── las tres líneas del relato ────────────────────────────────── Nunca hay dos en pantalla a la vez: se cruzan con aire negro. El tamaño se fija acá y no se hereda de .st (que es var(--fz-h2), un token de titulares): heredándolo, el texto del acto tres ocupaba cinco renglones y se comía la fila del lienzo. */ .pd-pasos{grid-column:1;grid-row:2;position:relative;min-height:8.2em; display:grid;align-items:end;opacity:calc(.34 + .66*var(--pd-luz))} .pd-t{grid-area:1/1;margin:0;opacity:0;translate:0 8px;pointer-events:none; transition:opacity var(--d3) var(--e-out),translate var(--d3) var(--e-out)} .pd-t.on{opacity:1;translate:0 0} .pd-act{display:block;margin-bottom:var(--sp2); font:500 9px/1 var(--fm);letter-spacing:.26em;text-transform:uppercase;color:var(--t3)} .pd-t .st{display:block;color:var(--t1);max-width:32ch; font-size:clamp(21px,2vw,31px);line-height:1.12} .pd-t em{font-style:normal} .pd-t em.vi{color:var(--v2)} .pd-t em.gr{color:var(--ok)} .pd-t em.am{color:var(--wait)} /* ── móvil ─────────────────────────────────────────────────────── El lienzo baja a 34svh y el RELATO se le monta encima con su propio velo: en el teléfono lo que vende es el registro, no el dibujo, y las dos fichas de cierre TIENEN que verse enteras. Con el reparto anterior el cuerpo del registro quedaba en 32-160px contra fichas de 230, y el argumento del bloque no se leía en ningún teléfono. El riel baja a 118svh: la tabla de umbrales es una sola y sirve para las dos anchuras, porque son fracciones del riel y no píxeles. Un desliz de dedo cruza varios pasos de un saque, y eso está resuelto en el modelo: los intermedios se clavan en su estado final y sólo el último se reproduce. */ @media (max-width:980px){ .pd-viz{grid-template-columns:minmax(0,1fr); grid-template-rows:34svh minmax(0,1fr); row-gap:var(--sp3);padding:68px clamp(12px,4vw,22px) var(--sp3)} .pd-lienzo{grid-column:1;grid-row:1;aspect-ratio:auto;height:100%;max-height:none} .pd-log{grid-column:1;grid-row:2;height:100%;padding:10px var(--sp3) 0} .pd-pasos{grid-column:1;grid-row:1;align-self:end;z-index:2; min-height:0;padding:44px 2px 4px; background:linear-gradient(180deg,transparent,var(--s0) 66%)} .pd-skip{top:58px;right:clamp(12px,4vw,22px)} .pd-ft{display:none} .pd-riel{height:118svh} .pd-ttl{font-size:9px;letter-spacing:.22em} .pd-l li{grid-template-columns:5ch 12px minmax(0,1fr);gap:8px; font-size:11.5px;padding-left:11px} .pd-l .gi{width:10px;height:10px} .pd-l li.pd-card{margin:var(--sp2) 0} .pd-cb{padding:var(--sp3)} .pd-why{font-size:13.5px;line-height:1.5} .pd-src,.pd-meta{font-size:10px} .pd-t .st{font-size:20px;font-variation-settings:'wdth' 88;max-width:28ch} .pd-cur{right:var(--sp3);bottom:14px} } @media (max-width:620px){ .pd-viz{grid-template-rows:31svh minmax(0,1fr)} .pd-t .st{font-size:18px;max-width:24ch} .pd-l li{font-size:11px} .pd-why{font-size:12.5px;line-height:1.45} .pd-val{font-size:13px} } @media (max-width:420px){ .pd-l time{font-size:9px} .pd-cb{padding:12px 14px} } /* ── EL DOCUMENTO ESTÁTICO · .pd-est ───────────────────────────── Ésta es la forma en que el bloque nace, y la forma a la que vuelve. Cubre TRES casos que antes se cubrían con uno solo y mal: · sin JavaScript, o con el archivo caído, o antes de que arranque; · movimiento reducido; · ventana de menos de 520px de alto, donde la pantalla partida no entra de ninguna manera. El error típico de esta técnica es congelar el lienzo y dejar el riel puesto: el que pidió menos movimiento queda castigado con más de una pantalla de scroll muerto frente a una imagen quieta. Acá el riel DESAPARECE y el registro se despliega entero, como el documento que es. Y los descartados siguen visibles con su cruz: la prueba de la poda es el argumento del bloque, y esconderla convierte una preferencia en una barrera. Va AL FINAL a propósito: tiene que pisar al bloque de móvil. */ .pd.pd-est{height:auto;padding-block:var(--sp6)} .pd-est .pd-viz{--pd-luz:1;position:static;height:auto;display:block; padding:0 clamp(18px,4vw,44px)} .pd-est .pd-lienzo{grid-column:auto;grid-row:auto; aspect-ratio:16/11;height:auto;max-height:none;margin-bottom:var(--sp4)} .pd-est .pd-riel,.pd-est .pd-prog,.pd-est .pd-skip{display:none} .pd-est .pd-log{grid-column:auto;grid-row:auto;height:auto;overflow:visible; margin-bottom:var(--sp4);opacity:1;padding:var(--sp3) var(--sp4) 0} .pd-est .pd-body{overflow:visible;-webkit-mask:none;mask:none} .pd-est .pd-l{transform:none!important;will-change:auto} .pd-est .pd-l li{opacity:1!important} .pd-est .pd-cb,.pd-est .pd-cb h3,.pd-est .pd-src{opacity:1!important;translate:none!important} .pd-est .pd-meta span::after{transform:scaleX(1)!important} .pd-est .pd-cur{display:none} .pd-est .pd-dot{animation:none!important;opacity:1} .pd-est .pd-ft{display:block;opacity:1!important} .pd-est .pd-pasos{grid-column:auto;grid-row:auto;min-height:0;display:grid; gap:var(--sp4);align-items:start;background:none;padding:0; margin-top:var(--sp4);opacity:1} .pd-est .pd-t{grid-area:auto;opacity:1!important;translate:none!important} .pd-est .pd-t .st{max-width:46ch} /* red de seguridad para los dos bucles de CSS: si el visitante pidió menos movimiento, el punto del encabezado y el cursor no laten aunque el motor todavía no haya puesto .pd-est. */ @media (prefers-reduced-motion:reduce){ .pd-dot{animation:none!important;opacity:1} .pd-cur{display:none} } /* ── contraste alto ──────────────────────────────────────────────── */ @media (prefers-contrast:more){ .pd-l li{color:var(--t1)} .pd-l li::before{width:4px} .pd-log{background:var(--s0);border:var(--bd2)} .pd-lienzo::after{display:none} } /* Sin backdrop-filter el vidrio de las fichas se rellena, igual que el resto del sitio (bloque @supports del final de nureq.css). */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .pd-cb{background:var(--s3)} } /* ═══════════════════════════════════════════════════════════════════ VERSIÓN SIN LIENZO · el registro solo El grafo en canvas se retiró: era la mitad que fallaba y la que no se puede leer, copiar ni auditar. El registro es DOM, es texto, y es la mitad que carga el argumento del bloque. Va AL FINAL: pisa por orden, no por especificidad. ═══════════════════════════════════════════════════════════════════ */ /* una sola columna centrada, en el ancho del resto del sitio */ .pd-viz{display:block;height:100svh;max-width:none} /* height:100% y NO 100svh. `.pd-viz` ya mide 100svh y encima lleva 92px de relleno arriba (para despejar la barra fija) y 28 abajo: con box-sizing:border-box su caja de contenido son 100svh menos 120. Un hijo fijado otra vez en 100svh se pasa esos 120 px, y lo que se cae por abajo es el pie del registro y el último tramo del panel. Se veía como «el panel se corta», que es un síntoma y no la causa. El relleno vertical propio se va por lo mismo: ya lo pone el padre. */ .pd-viz>.in{display:flex;flex-direction:column;justify-content:center; height:100%;padding-block:0;gap:var(--sp3)} .pd-viz .th{font-size:clamp(24px,2.6vw,38px);line-height:1.08;margin:0} .pd-viz .lead{max-width:70ch;margin:0;font-size:clamp(14px,1.15vw,16.5px)} .pd-viz .eyebrow{margin:0} /* PANTALLA BAJA. A 1366x680 el encabezado se comía 320 de 680 px y al registro le quedaban 297: se veían cinco renglones y el bloque perdía la sensación de registro que se llena. Acá el encabezado cede alto y el panel se lo queda. Es por ALTO de ventana, no por ancho: un portátil ancho y bajo sufre lo mismo que uno chico. VA DESPUÉS de las tres reglas de arriba, no antes: una media query no suma especificidad, así que puesta antes la pisa la regla suelta y no cambia el cuerpo del titular. Pasó, y se veía como que la media query «no se aplicaba». */ @media (max-height:760px){ .pd-viz{padding-top:74px} .pd-viz>.in{gap:10px} .pd-viz .th{font-size:clamp(21px,2.15vw,30px)} .pd-viz .lead{font-size:clamp(13px,1vw,14.5px);max-width:82ch} .pd-pie{font-size:10.5px} } @media (max-height:620px){ .pd-viz{padding-top:66px} .pd-viz .th{font-size:clamp(19px,1.9vw,26px)} .pd-pie{display:none} } /* el registro deja de ser la columna derecha y pasa a ser el cuerpo */ .pd-log{grid-column:auto;grid-row:auto;align-self:stretch; width:100%;max-width:none;height:auto;flex:1 1 auto;min-height:0} /* LA RÁFAGA, EN CSS. Al activarse un paso, sus renglones reciben .on todos juntos y cada uno arranca con su propio retardo. La reproduce el navegador: no depende de que la rueda siga girando, no se puede entrecortar y no hay un solo cuadro dibujado a mano. */ .pd-l li{transform:translateY(9px); transition:opacity 460ms var(--e-out), transform 460ms var(--e-out), background var(--d2) linear; transition-delay:calc(var(--d,0) * 78ms)} .pd-l li.on{transform:none} /* al retroceder, el escalonado se invierte y se acorta: deshacer tiene que sentirse más rápido que hacer, o el bloque se vuelve pegajoso */ .pd-l li:not(.on){transition-duration:200ms;transition-delay:calc(var(--r,0) * 26ms)} /* las dos fichas entran con un poco más de recorrido: son el remate */ .pd-l li.pd-card{transform:translateY(16px)} .pd-l li.pd-card.on{transform:none} .pd-pie{margin:0;font-size:11.5px} /* la barra de avance del bloque */ .pd-prog{height:2px;background:var(--bd0);border-radius:2px;overflow:hidden;margin:0} .pd-prog i{display:block;height:100%;width:0;background:var(--v3); transition:width 320ms var(--e-out)} @media (max-width:900px){ .pd-viz .lead{display:none} .pd-viz .th{font-size:clamp(21px,4.6vw,28px)} .pd-l li{transition-delay:calc(var(--d,0) * 62ms)} } /* el documento estático: sin JS se lee entero, sin recortes ni riel */ .pd-est .pd-viz{height:auto} .pd-est .pd-viz>.in{height:auto;display:block} .pd-est .pd-l li{opacity:1;transform:none;transition:none} .pd-est .pd-prog{display:none} /* el corrimiento del registro se mueve UNA vez por paso, no por cuadro: por eso acá sí corresponde una transición y no la prohibición vieja */ .pd-l{transition:transform 520ms var(--e-out)} .pd-est .pd-l{transition:none;transform:none} /* ═══════════════════════════════════════════════════════════════════ REPRODUCCIÓN SOLA — el bloque deja de depender de la rueda ═══════════════════════════════════════════════════════════════════ */ /* El riel existía para darle recorrido al scroll: doce pasos repartidos en 130svh de altura muerta. Con el reloj propio no hay nada que recorrer, así que la sección mide exactamente una pantalla y nadie tiene que bajar para que el registro se escriba. El sticky queda sin viaje —inofensivo— y se conserva porque toda la aritmética de alto del panel está calibrada contra .pd-viz en 100svh. */ .pd-riel{display:none} /* .pd-skip estaba declarada desde el principio y sin usar. Ahora es un