/* ═══════════════════════════════════════════════════════════════ ORUXIA · hoja única compartida por las tres páginas Mundo: «El Sello». Blanco real, azul Oruxia, un solo gesto. ═══════════════════════════════════════════════════════════════ */ :root{ /* superficie El papel es papel, no blanco de pantalla. Estuvo en #FCFCFB hasta el 05-09 y el problema no era el brillo: era que el fondo y los paneles tenían 1,03:1 de contraste —tres puntos sobre 255—, así que la superficie propia de los módulos, que este sistema da por sentada, no existía. El 93 % de la pantalla era la misma lámina y la vista no encontraba dónde agarrarse. Ahora el panel se separa a 1,09:1 y un folio real, que es lo que este mundo dice ser, tampoco es blanco puro. */ --paper:#F6F5F2; --paper-2:#EFEEEA; --ink:#16150F; --ink-60:#5B5952; --ink-40:#727069; /* 4.55:1 sobre el papel nuevo · AA en texto pequeño */ --rule:#DEDCD5; --rule-2:#E9E7E1; /* el único acento */ --sello:#0E56C2; --sello-suave:#E7F0FC; --sello-fuerte:#0A45A0; /* el acento pulsado o en hover */ /* ritmo. El margen respeta el recorte de la pantalla: en horizontal, el notch se come el lateral, y sin esto el texto queda debajo. */ --sa-i:env(safe-area-inset-left, 0px); --sa-d:env(safe-area-inset-right, 0px); --sa-arriba:env(safe-area-inset-top, 0px); --sa-abajo:env(safe-area-inset-bottom, 0px); --margin:calc(clamp(18px,4vw,40px) + max(var(--sa-i), var(--sa-d))); --ancho:1280px; --aire:clamp(60px,8.5vh,108px); /* el panel se queda en blanco puro: es lo que lo eleva sobre el papel */ --panel:#FFFFFF; --panel-borde:#E2E0D9; --relieve:0 1px 2px rgba(22,21,15,.035), 0 14px 36px -14px rgba(22,21,15,.07); /* movimiento: una sola curva, tres intensidades */ /* la flecha, como máscara reutilizable: un solo trazo para todo el sitio */ --flechita:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 8'%3E%3Cpath d='M0 4h15M12 1l3.4 3-3.4 3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M.8.9 4 3.9 7.2.9' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --curva:cubic-bezier(.16,1,.3,1); --toque:120ms; --medio:240ms; --completo:420ms; } /* ─────────────── el reverso del papel ─────────────── El modo oscuro está resuelto en los tokens y todavía no tiene selector: se activa poniendo data-tema="oscuro" en . No es «la misma web en negro»: es el mismo sistema con los papeles cambiados. El fondo es carbón cálido, no negro puro, porque es el reverso de esta tinta y no el de cualquiera; el acento sube a un azul que aguanta sobre oscuro, y el botón se invierte solo, porque sigue siendo tinta sobre papel — solo que ahora la tinta es clara. Contrastes medidos sobre el fondo: texto 16,6:1 · secundario 7,7:1 · etiquetas 5,3:1 · acento 7,7:1. Los cuatro pasan AA. */ :root[data-tema="oscuro"]{ color-scheme:dark; --paper:#141310; --paper-2:#1B1A16; --ink:#F2F1EC; --ink-60:#A8A69D; --ink-40:#8B8981; --rule:#2A2925; --rule-2:#201F1B; --sello:#6FA8F7; --sello-suave:#16243A; --sello-fuerte:#9BC4FA; --panel:#1A1915; --panel-borde:#302E28; --relieve:0 1px 2px rgba(0,0,0,.4), 0 14px 36px -14px rgba(0,0,0,.6); } :root[data-tema="oscuro"] .sub{ box-shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px -16px rgba(0,0,0,.7); } /* el sello es tinta sobre papel: en oscuro se estampa en claro */ :root[data-tema="oscuro"] ::selection{background:var(--sello);color:#0B1220} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--paper); color:var(--ink); font-family:'Archivo',system-ui,-apple-system,sans-serif; font-variation-settings:'wdth' 100,'wght' 400; font-size:clamp(.97rem,.94rem + .18vw,1.06rem); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* las superficies del navegador también se diseñan */ ::selection{background:var(--sello);color:#fff} ::-webkit-scrollbar{width:11px} ::-webkit-scrollbar-track{background:var(--paper)} ::-webkit-scrollbar-thumb{background:var(--rule);border:4px solid var(--paper)} ::-webkit-scrollbar-thumb:hover{background:var(--ink-40)} :focus-visible{outline:2px solid var(--sello);outline-offset:4px;border-radius:1px} :target{scroll-margin-top:120px} a{color:inherit} img{max-width:100%;display:block} button{font:inherit;color:inherit} .mono{font-family:'Martian Mono',ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums;letter-spacing:-0.04em} .oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .saltar{ position:absolute;left:var(--margin);top:14px;z-index:99; background:var(--ink);color:var(--paper);padding:12px 18px;text-decoration:none; border-radius:999px; font-family:'Archivo',system-ui,sans-serif;font-size:13px; font-variation-settings:'wght' 600; transform:translateY(-84px); transition:transform var(--toque) var(--curva); } .saltar:focus{transform:none} /* ─────────────── armazón persistente ─────────────── */ /* La barra tiene forma propia. Se disolvía en un degradado hacia el papel, que es lo que la dejaba sin borde y sin peso: arriba del todo es transparente sobre el papel, y en cuanto la página se despega toma fondo y filete. */ .nav{ position:fixed;top:0;left:0;right:0;z-index:30; border-bottom:1px solid transparent; transition:border-color var(--medio) var(--curva); view-transition-name:shell-nav; } .nav::before{ content:'';position:absolute;inset:0;background:var(--paper); opacity:0;transition:opacity var(--medio) var(--curva); } body.pegado .nav{border-bottom-color:var(--rule)} body.pegado .nav::before,body.menu-abierto .nav::before{opacity:1} /* tres zonas: marca, navegación en el eje de la página, acciones */ .nav-env{ position:relative;z-index:1; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px; padding-top:calc(15px + var(--sa-arriba));padding-bottom:15px; } .nav-med{justify-self:center} /* La marca es el nombre de la empresa, no un pie de foto. Entraba en Martian Mono a 11,5 px, con el peso visual de una nota al margen. */ .marca{ display:inline-flex;align-items:center;gap:9px; text-decoration:none;color:var(--ink); } .marca span{ font-family:'Archivo',system-ui,sans-serif;font-size:16px; font-variation-settings:'wght' 640,'wdth' 92;letter-spacing:-0.015em; } .marca .anillo{width:19px;height:19px;flex:none;color:var(--sello)} /* La navegación es interfaz, no un dato. Iba entera en monoespaciada, en mayúsculas y con interletrado negativo: las tres cosas que la envejecían. */ .menu{display:flex;gap:clamp(18px,2.4vw,30px);list-style:none;align-items:center} .menu > li{position:relative} .menu a{ position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 0; font-family:'Archivo',system-ui,sans-serif;font-size:13.5px; font-variation-settings:'wght' 560,'wdth' 100;letter-spacing:-0.005em; color:var(--ink-60);text-decoration:none; transition:color var(--toque) var(--curva); } .menu a:hover{color:var(--ink)} .menu a.aqui{color:var(--ink)} .menu a.aqui::after{ content:'';position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--sello); view-transition-name:marcador; } /* el cluster de acciones vive fuera del