/* CASA v4 — la piel común de bquantagents.com --------------------------------------------------------------------------- REGLA QUE MANDA SOBRE TODO LO DEMÁS: esta hoja no puede romper ninguna página. Por eso: · no declara :root ni toca ninguna variable de página (--bg, --ink, --oro… siguen siendo de quien las escribió). Las suyas van con prefijo --cz-. · todo lo global va con :where(), que tiene especificidad CERO: cualquier regla de la página gana sin necesidad de !important. · lo único que estiliza de verdad son los componentes que inyecta casa.js, y esos llevan clase propia .cz-*. Si algo se ve mal, la página gana. En el peor caso queda como estaba. DOS AMBIENTES: casa.js mide el fondo real del body y marca con .cz-claro o .cz-oscuro. El index es papel y el interior es tinta; una sola barra sirve para los dos. */ .cz-oscuro{ --cz-fondo:#101725; --cz-panel:#18202f; --cz-linea:#2b3a56; --cz-ink:#eff3fa; --cz-dim:#a9b6cc; --cz-dim2:#8d99b0; --cz-acento:#d9a34c; --cz-vidrio:rgba(11,16,24,.78); } .cz-claro{ --cz-fondo:#fdfdfc; --cz-panel:#ffffff; --cz-linea:#e2e0da; --cz-ink:#0e1420; --cz-dim:#5a6478; --cz-dim2:#7c8598; --cz-acento:#8f671b; --cz-vidrio:rgba(253,253,252,.86); } /* mientras casa.js no haya medido nada, se asume tinta: es lo que hay dentro */ html:not(.cz-claro):not(.cz-oscuro){ --cz-fondo:#101725; --cz-panel:#18202f; --cz-linea:#2b3a56; --cz-ink:#eff3fa; --cz-dim:#a9b6cc; --cz-dim2:#8d99b0; --cz-acento:#d9a34c; --cz-vidrio:rgba(11,16,24,.78); } /* colores de la casa — un solo sitio donde vive el canon */ :root{ --c-wald:#e05c6e; --c-merkle:#b48ce0; --c-shannon:#4a6fa5; --c-kuramoto:#7ea4d8; --c-bayes:#e0703c; --c-noether:#54c48f; --c-sharpe:#d9a34c; --c-thaler:#34a3a3; --c-tikhonov:#9b6fd4; } /* ── LA BARRA ─────────────────────────────────────────────────────────── */ .cz-nav{ position:sticky;top:0;z-index:900;display:flex;align-items:center;gap:4px; padding:0 18px;min-height:52px;background:var(--cz-vidrio); backdrop-filter:saturate(140%) blur(9px); border-bottom:1px solid var(--cz-linea); font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } .cz-nav__marca{ display:flex;align-items:center;gap:8px;margin-right:14px;text-decoration:none; color:var(--cz-ink);font-weight:600;font-size:12px;letter-spacing:.13em; text-transform:uppercase;white-space:nowrap; } .cz-nav__gema{ width:9px;height:9px;background:var(--cz-acento);transform:rotate(45deg); box-shadow:0 0 10px color-mix(in srgb,var(--cz-acento) 60%,transparent); } .cz-nav__links{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto; scrollbar-width:none} .cz-nav__links::-webkit-scrollbar{display:none} .cz-nav a.cz-l{ padding:7px 11px;font-size:11px;letter-spacing:.11em;text-transform:uppercase; color:var(--cz-dim);text-decoration:none;white-space:nowrap; border-bottom:2px solid transparent;transition:color .2s,border-color .2s; } .cz-nav a.cz-l:hover{color:var(--cz-ink)} .cz-nav a.cz-l[aria-current="page"]{color:var(--cz-ink);border-bottom-color:var(--cz-acento)} .cz-nav__fin{display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:10px} .cz-chip{ display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--cz-dim); border:1px solid var(--cz-linea);border-radius:2px;text-decoration:none; background:transparent;transition:border-color .2s,color .2s; } .cz-chip:hover{color:var(--cz-ink);border-color:var(--cz-acento)} .cz-chip--fuerte{color:var(--cz-fondo);background:var(--cz-acento);border-color:var(--cz-acento);font-weight:600} .cz-chip--fuerte:hover{color:var(--cz-fondo);filter:brightness(1.08)} .cz-chip--yo{color:var(--cz-ink);border-color:color-mix(in srgb,var(--cz-acento) 45%,var(--cz-linea))} .cz-chip--yo:hover{border-color:var(--cz-acento); box-shadow:0 0 18px -6px color-mix(in srgb,var(--cz-acento) 80%,transparent)} .cz-led{width:6px;height:6px;border-radius:50%;background:#54c48f; box-shadow:0 0 7px #54c48f;animation:cz-late 2.6s ease-in-out infinite} @keyframes cz-late{0%,100%{opacity:.45}50%{opacity:1}} /* ── LA FRANJA DE PRIMERA VISITA ────────────────────────────────────── Aparece una sola vez, debajo de la barra, y explica en dos líneas dónde ha caído quien llega sin saber nada. Se cierra y no vuelve. */ .cz-bienve{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; padding:14px 20px;background:var(--cz-panel); border-bottom:1px solid var(--cz-linea); box-shadow:inset 3px 0 0 var(--cz-acento); animation:cz-baja .5s cubic-bezier(.2,.7,.3,1) both; } .cz-bienve__txt{flex:1;min-width:260px;color:var(--cz-dim); font:400 14px/1.6 Outfit,ui-sans-serif,system-ui,sans-serif} .cz-bienve__txt b{color:var(--cz-ink);font-weight:600} .cz-bienve__acc{display:flex;gap:9px;align-items:center;flex-wrap:wrap} .cz-bienve__acc button{cursor:pointer;font-family:"Geist Mono",ui-monospace,monospace} @keyframes cz-baja{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.cz-bienve{animation:none}} /* ══ LA PIEL DE TERMINAL ═════════════════════════════════════════════ Faltaba personalidad: se veía como un producto financiero serio, no como una casa donde ocho tipos raros discuten. Esto no es maquillaje — es lo que dice, antes de leer una palabra, «aquí dentro se juega». La referencia es el terminal de una instalación vieja: monoespaciada con autoridad, esquinas cortadas en vez de redondeadas, marcas de registro en los bordes, y un verde de fósforo que solo aparece donde algo está VIVO. Nada de esto se pone porque sí: cada pieza marca una categoría distinta de información. */ :root{ --cz-fosforo:#7ee6a8; /* algo que está pasando ahora */ --cz-ambar:#e8b84b; /* algo que exige atención */ --cz-oxido:#c9705f; /* algo que salió mal, y no se borra */ --cz-hueso:#cbd5e6; /* lo registrado, lo que ya es pasado */ --cz-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; } /* ESQUINA CORTADA — el marco de una ficha, no de una tarjeta de banco. Se hace con clip-path para que no necesite imágenes ni pseudoelementos. */ .cz-ficha{ position:relative;background:var(--cz-panel); border:1px solid var(--cz-linea); clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); padding:20px 22px; } /* el filo de la esquina, que es lo que la hace parecer metal cortado */ .cz-ficha::after{ content:"";position:absolute;top:0;right:0;width:14px;height:14px; background:linear-gradient(45deg,transparent 48%,var(--cz-linea) 50%,transparent 52%); pointer-events:none; } /* MARCAS DE REGISTRO en las esquinas: cuatro escuadras finas. Es el detalle que más «instrumento» aporta por menos código. */ .cz-mira{position:relative} .cz-mira::before,.cz-mira::after{ content:"";position:absolute;width:9px;height:9px;pointer-events:none; border-color:color-mix(in srgb,var(--cz-acento) 55%,transparent); } .cz-mira::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid} .cz-mira::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid} /* ETIQUETA DE CAMPO — «CLASE ▸ SINCRONÍA». La flecha en vez de dos puntos cambia por completo el registro: dos puntos es un formulario, la flecha es una lectura de instrumento. */ .cz-campo{ display:flex;align-items:baseline;gap:10px; padding:7px 0;border-bottom:1px dotted color-mix(in srgb,var(--cz-linea) 80%,transparent); } .cz-campo:last-child{border-bottom:0} .cz-campo__k{ flex:none;min-width:112px; font:500 11.5px/1.5 var(--cz-mono);letter-spacing:.15em;text-transform:uppercase; color:var(--cz-dim2); } .cz-campo__k::after{content:" ▸";opacity:.5} .cz-campo__v{color:var(--cz-ink);font-size:15px} /* BARRA DE ESTADÍSTICA — la de toda la vida, por segmentos y no continua. Una barra continua es un porcentaje; una por segmentos son PUNTOS, y los puntos se cuentan de un vistazo sin leer el número. */ .cz-stat{display:flex;align-items:center;gap:10px;margin:5px 0} .cz-stat__k{ flex:none;min-width:96px;font:500 11px/1 var(--cz-mono); letter-spacing:.13em;text-transform:uppercase;color:var(--cz-dim2)} .cz-stat__b{display:flex;gap:2px;flex:1} .cz-stat__p{ flex:1;height:9px;background:color-mix(in srgb,var(--cz-linea) 60%,transparent); border:1px solid transparent} .cz-stat__p--on{background:var(--cz-acento); box-shadow:0 0 6px color-mix(in srgb,var(--cz-acento) 45%,transparent)} .cz-stat__n{flex:none;font:500 12px/1 var(--cz-mono);color:var(--cz-hueso); font-variant-numeric:tabular-nums;min-width:36px;text-align:right} /* SELLO — para lo que está cerrado y no se toca. Va girado un pelo, como los de verdad, porque un sello perfectamente recto parece un botón. */ .cz-sello{ display:inline-block;transform:rotate(-2.4deg); font:600 11px/1 var(--cz-mono);letter-spacing:.2em;text-transform:uppercase; padding:6px 11px;border:2px solid currentColor;border-radius:2px; color:var(--cz-oxido);opacity:.82} .cz-sello--ok{color:var(--cz-fosforo)} .cz-sello--esp{color:var(--cz-ambar)} /* LATIDO — un punto que respira. SOLO para lo que de verdad está corriendo ahora mismo: si parpadea todo, no significa nada. */ .cz-vivo{ display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--cz-fosforo);margin-right:7px;vertical-align:middle; box-shadow:0 0 0 0 color-mix(in srgb,var(--cz-fosforo) 70%,transparent); animation:cz-latido 2.4s ease-out infinite} @keyframes cz-latido{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cz-fosforo) 60%,transparent)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent}} @media (prefers-reduced-motion:reduce){.cz-vivo{animation:none}} /* LÍNEA DE TERMINAL: «> algo está pasando». El cursor solo en la última. */ .cz-term{font:400 13.6px/1.85 var(--cz-mono);color:var(--cz-hueso)} .cz-term p{margin:0;max-width:none} .cz-term p::before{content:"> ";color:var(--cz-acento);opacity:.65} .cz-term p:last-child::after{ content:"_";color:var(--cz-fosforo);animation:cz-cursor 1.15s steps(2) infinite} @keyframes cz-cursor{0%,49%{opacity:1}50%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){.cz-term p:last-child::after{animation:none}} /* ── EL RASTRO: lo que te queda por descubrir ───────────────────────── Discreto a propósito. Un contador que grita es una tarea; uno que susurra es una invitación. */ .cz-rastro{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin-top:16px;padding-top:14px;border-top:1px solid var(--cz-linea); font:400 13px/1.6 Outfit,ui-sans-serif,system-ui,sans-serif;color:var(--cz-dim2); } .cz-rastro b{color:var(--cz-ink);font-weight:600} .cz-rastro a{color:var(--cz-acento);text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--cz-acento) 35%,transparent); transition:border-color .2s} .cz-rastro a:hover{border-bottom-color:var(--cz-acento)} .cz-rastro__n{ flex:none;font:500 11px/1 "Geist Mono",ui-monospace,monospace;font-style:normal; letter-spacing:.06em;color:var(--cz-acento);padding:5px 9px; border:1px solid color-mix(in srgb,var(--cz-acento) 38%,var(--cz-linea)); border-radius:2px;font-variant-numeric:tabular-nums; } .cz-rastro--pleno .cz-rastro__n{display:none} .cz-rastro--pleno{color:var(--cz-dim)} /* ══ TIPOGRAFÍA: la escala ═══════════════════════════════════════════ Antes cada página elegía sus tamaños a ojo y ninguno se parecía al de al lado. Esto es una escala de verdad —cada peldaño es 1,25 veces el anterior— para que los tamaños se relacionen entre sí en vez de ser números sueltos. Va con `:where()`, así que cualquier página que ya tenga su tamaño lo conserva: esto es un suelo, no una imposición. */ :root{ --cz-t0: 12.5px; /* etiquetas, monoespaciada */ --cz-t1: 14px; /* letra pequeña, notas al pie */ --cz-t2: 16.5px; /* EL TEXTO CORRIENTE. Antes 15,5: pequeño */ --cz-t3: 20.5px; /* entradillas */ --cz-t4: 26px; /* títulos de sección */ --cz-t5: 33px; /* títulos de página */ --cz-t6: clamp(36px, 5vw, 52px); /* el grande de portada */ /* interlineado: el texto largo respira más que un titular */ --cz-lh-texto: 1.72; --cz-lh-titulo: 1.18; /* y una pizca de nitidez, que es lo que se pedía */ --cz-nitido: 0.01em; /* separación entre letras en cuerpos pequeños */ } /* El cuerpo de texto sube de 15,5 a 16,5: parece poco y se nota en cada párrafo. Y las mayúsculas pequeñas de las etiquetas se separan, que es lo que las hace legibles en vez de un bloque gris. */ :where(body){ font-size:var(--cz-t2); line-height:var(--cz-lh-texto); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility } :where(h1,h2,h3,h4){ line-height:var(--cz-lh-titulo); letter-spacing:-.014em } :where(small, .cz-peq){ font-size:var(--cz-t1) } /* Las etiquetas en monoespaciada eran lo peor de leer de toda la casa: demasiado pequeñas, demasiado apretadas y demasiado apagadas. */ :where([class*="cz-"] [class*="et"], .cz-nav__peq){ letter-spacing:.14em; font-size:var(--cz-t0) } /* ── LEGIBILIDAD: lo que más se agradece y menos se nota ────────────── Tres cosas que cambian mucho leyendo y nada mirando: la línea no puede ser infinita, el texto largo respira más, y los enlaces dentro de un párrafo tienen que verse sin gritar. */ :where(p, li){ text-wrap:pretty } :where(h1, h2, h3){ text-wrap:balance } :where(p){ max-width:74ch } :where(a[href]):not(.cz-l):not(.cz-chip):not(.btn):focus-visible{ outline:2px solid var(--cz-acento);outline-offset:3px;border-radius:2px} @media (max-width:640px){ :where(p, li){ font-size:15.5px; line-height:1.72 } } /* ── EL PIE DE FLUJO: dónde estás y a dónde se va ─────────────────────── */ .cz-pie{ margin:64px 0 0;padding:26px 22px 30px;border-top:1px solid var(--cz-linea); background:var(--cz-fondo);color:var(--cz-dim); font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em; } .cz-pie__caja{max-width:1080px;margin:0 auto;display:flex;gap:22px; align-items:center;justify-content:space-between;flex-wrap:wrap} .cz-pie__aqui{text-transform:uppercase} .cz-pie__aqui b{color:var(--cz-ink);font-weight:600} .cz-pie__ir{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .cz-pie__ir a{ display:inline-flex;align-items:center;gap:8px;padding:9px 14px; color:var(--cz-ink);text-decoration:none;border:1px solid var(--cz-linea); text-transform:uppercase;transition:border-color .2s,transform .2s; } .cz-pie__ir a:hover{border-color:var(--cz-acento);transform:translateX(2px)} .cz-pie__ir .cz-fl{color:var(--cz-acento)} .cz-pie__nota{width:100%;color:var(--cz-dim2);text-transform:none;letter-spacing:.04em; font-size:11px;line-height:1.65;max-width:720px} /* ── GLOSARIO: una palabra rara se explica al pasar por encima ────────── */ :where([data-g]){ border-bottom:1px dashed color-mix(in srgb,var(--cz-acento) 55%,transparent); cursor:help; } .cz-tip{ position:fixed;z-index:1200;max-width:290px;padding:11px 13px; background:var(--cz-panel);border:1px solid var(--cz-linea); border-left:2px solid var(--cz-acento);color:var(--cz-ink); font:400 12.5px/1.55 Outfit,ui-sans-serif,system-ui,sans-serif;letter-spacing:0; box-shadow:0 12px 34px rgba(0,0,0,.4);pointer-events:none; opacity:0;transform:translateY(5px);transition:opacity .18s,transform .18s; } .cz-tip.on{opacity:1;transform:none} .cz-tip b{display:block;margin-bottom:5px;font-family:"Geist Mono",monospace; font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cz-acento)} .cz-tip__mas{display:block;margin-top:8px;padding-top:7px;border-top:1px solid var(--cz-linea); font:400 10px/1.4 "Geist Mono",ui-monospace,monospace;letter-spacing:.12em; text-transform:uppercase;color:var(--cz-dim2)} /* ── CONTROLES CRUDOS: especificidad CERO, la página siempre gana ─────── */ :where(input[type=text],input[type=email],input[type=number],input[type=search], input[type=password],select,textarea){ background:var(--cz-panel);color:var(--cz-ink); border:1px solid var(--cz-linea);border-radius:2px;padding:9px 11px; font:400 14px/1.4 Outfit,ui-sans-serif,system-ui,sans-serif; } :where(input,select,textarea):focus-visible{ outline:2px solid var(--cz-acento);outline-offset:1px; } :where(button):focus-visible,:where(a):focus-visible{ outline:2px solid var(--cz-acento);outline-offset:2px; } :where(::selection){background:color-mix(in srgb,var(--cz-acento) 34%,transparent)} /* ── ARREGLO DEL NAV DE LA PORTADA ──────────────────────────────────── Su nav se parte en dos líneas con las etiquetas largas y se ve descuadrado. No se edita la página: se le impide partir palabras y se le da aire. Todo con especificidad mínima, así que si algún día la portada lo resuelve por su cuenta, su regla gana. */ .cz-nav-arreglo :where(a){white-space:nowrap} .cz-nav-arreglo{flex-wrap:nowrap;column-gap:clamp(10px,1.6vw,26px)} @media (max-width:1180px){ .cz-nav-arreglo{overflow-x:auto;scrollbar-width:none} .cz-nav-arreglo::-webkit-scrollbar{display:none} } /* ── EL LENGUAJE DE LAS CAJAS ───────────────────────────────────────── Todo lo que es una caja en esta casa se comporta igual: filo de color a la izquierda, esquinas mordidas de instrumento, y una respuesta al hover que levanta sin saltar. Se aplica por CLASE, así que una página lo pide cuando quiere y ninguna lo hereda por accidente. El acento de cada caja se pasa en --ca; si no, usa el de la casa. */ .cz-caja{ position:relative;background:var(--cz-panel);border:1px solid var(--cz-linea); /* una sombra interior de un pelo arriba: separa la caja del fondo sin que se note de dónde viene la separación. Es el truco más barato que hay para dar nitidez. */ box-shadow:inset 0 1px 0 rgba(255,255,255,.035); transition:border-color .28s cubic-bezier(.2,.7,.3,1), transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s; } .cz-caja::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--ca,var(--cz-acento));opacity:.72; } /* las esquineras: dos filos finos arriba-derecha y abajo-izquierda */ .cz-caja::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background: linear-gradient(to left, var(--ca,var(--cz-acento)) 0 14px, transparent 14px) top right/14px 1px no-repeat, linear-gradient(to bottom, var(--ca,var(--cz-acento)) 0 14px, transparent 14px) top right/1px 14px no-repeat, linear-gradient(to right, var(--ca,var(--cz-acento)) 0 14px, transparent 14px) bottom left/14px 1px no-repeat, linear-gradient(to top, var(--ca,var(--cz-acento)) 0 14px, transparent 14px) bottom left/1px 14px no-repeat; } .cz-caja--viva:hover{ border-color:color-mix(in srgb,var(--ca,var(--cz-acento)) 55%,var(--cz-linea)); transform:translateY(-2px); box-shadow:0 16px 38px -22px color-mix(in srgb,var(--ca,var(--cz-acento)) 70%,transparent); } .cz-caja--viva:hover::after{opacity:1} /* una cifra con su etiqueta debajo: el ladrillo de todos los marcadores */ .cz-dato{min-width:100px} .cz-dato .n{display:block;font:600 26px/1.1 Fraunces,Georgia,serif; font-variant-numeric:tabular-nums;letter-spacing:-.01em} .cz-dato .e{display:block;margin-top:4px;font:400 9.5px/1.4 "Geist Mono",ui-monospace,monospace; letter-spacing:.13em;text-transform:uppercase;color:var(--cz-dim2)} .cz-dato.g .n{color:#54c48f} .cz-dato.p .n{color:#d0685a} .cz-dato.o .n{color:var(--cz-acento)} /* ── EL AMBIENTE: un fondo que respira, igual en toda la casa ─────────── */ .cz-fondo{position:fixed;inset:0;z-index:0;pointer-events:none} .cz-fondo canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55} .cz-retic{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.022; background-image:linear-gradient(var(--cz-ink) 1px,transparent 1px), linear-gradient(90deg,var(--cz-ink) 1px,transparent 1px); background-size:46px 46px} @media (prefers-reduced-motion:reduce){.cz-fondo canvas{display:none}} /* ── UTILIDADES de la casa ────────────────────────────────────────────── */ .cz-halo{box-shadow:0 0 0 1px color-mix(in srgb,var(--ca,var(--cz-acento)) 34%,transparent), 0 0 26px -6px color-mix(in srgb,var(--ca,var(--cz-acento)) 55%,transparent)} .cz-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .cz-saltar{ position:absolute;left:-9999px;top:8px;z-index:1500;padding:10px 14px; background:var(--cz-acento);color:var(--cz-fondo);text-decoration:none; font:600 12px/1 "Geist Mono",monospace; } .cz-saltar:focus{left:8px} @media (max-width:760px){ .cz-nav{padding:0 10px;min-height:48px} .cz-nav__marca span{display:none} .cz-pie__caja{flex-direction:column;align-items:flex-start;gap:14px} } @media (prefers-reduced-motion:reduce){ .cz-led{animation:none} .cz-tip,.cz-pie__ir a,.cz-nav a.cz-l{transition:none} }