/* Autoalojadas: 60 KB que sirve el mismo mini PC. Enlazar Google Fonts sería mandar a cada visitante a pedirle algo a un tercero sin necesidad. */ @font-face{font-family:Geist;src:url(tipos/geist-400.woff2)format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Geist;src:url(tipos/geist-500.woff2)format("woff2");font-weight:500;font-display:swap} @font-face{font-family:Geist;src:url(tipos/geist-700.woff2)format("woff2");font-weight:700;font-display:swap} @font-face{font-family:"JB Mono";src:url(tipos/jbmono-400.woff2)format("woff2");font-weight:400;font-display:swap} /* --------------------------------------------------------------------------- COLOR --------------------------------------------------------------------------- Los colores oscuros son los del escritorio (build/desktop/quickshell/ Paleta.qml). Para el sitio de un sistema operativo, la fuente honesta de color es el propio sistema: lo que se ve aquí es lo que se ve al arrancarlo. Hasta ahora el sitio era SÓLO oscuro, y había colores escritos a pelo por media hoja (#05070c en los bloques de código, un rgba en la navegación). Quien entraba de día con el móvil se comía un fondo negro sin alternativa, y añadir un tema claro era imposible sin cazar esos valores sueltos uno a uno. Ahora TODO color sale de una variable, y hay tres estados: :root el tema claro, que es el valor por defecto prefers-color-scheme:dark lo que pida el sistema de quien mira [data-tema="claro"|"oscuro"] lo que haya elegido a mano, que gana La regla que separa esto del "dark tech" de plantilla sigue intacta: el acento SÓLO para lo que está vivo. En toda la página aparece en cinco sitios contados. El color lo ponen las capturas, no la decoración. */ :root{ --lienzo:#fbfbfd; --lienzo-nav:rgba(251,251,253,.82); --superficie:#f1f2f6; --hundido:#eef0f4; --borde:#dfe2e9; --borde-fuerte:#c8ccd6; --texto:#10141b; --tenue:#5c6472; --vivo:#0077a8; --vivo-claro:#005f88; --sobre-vivo:#ffffff; --sombra:0 1px 2px rgba(16,20,27,.05),0 8px 24px rgba(16,20,27,.06); --sans:Geist,ui-sans-serif,system-ui,sans-serif; --mono:"JB Mono",ui-monospace,SFMono-Regular,monospace; /* Una sola escala de radios, documentada: reglas estructurales a 0, superficies e imágenes a 10, cosas pulsables en cápsula. */ --r-sup:10px; } /* El tema oscuro: los colores del escritorio de verdad. */ @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]){ --lienzo:#090b10; --lienzo-nav:rgba(9,11,16,.86); --superficie:#12161d; --hundido:#05070c; --borde:#232a35; --borde-fuerte:#333c4a; --texto:#e8ebf0; --tenue:#79818f; --vivo:#00d4ff; --vivo-claro:#3ee0ff; --sobre-vivo:#04121a; --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35); } } /* Y el mismo tema cuando se elige a mano, que manda sobre lo que diga el sistema. Va repetido a propósito: una variable definida SÓLO dentro de un media query deja de existir en cuanto el media query no aplica, y entonces el botón de cambiar tema no puede hacer nada. */ :root[data-tema="oscuro"]{ --lienzo:#090b10; --lienzo-nav:rgba(9,11,16,.86); --superficie:#12161d; --hundido:#05070c; --borde:#232a35; --borde-fuerte:#333c4a; --texto:#e8ebf0; --tenue:#79818f; --vivo:#00d4ff; --vivo-claro:#3ee0ff; --sobre-vivo:#04121a; --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35); } *{box-sizing:border-box} /* Ninguna imagen desborda su sitio ni se deforma. Va aquí arriba y sin excepciones: cada vez que una regla concreta ponía "max-width:none" para conseguir un efecto, la imagen acababa recortada a algún ancho intermedio que nadie había mirado. height:auto es obligatorio porque el atributo height="900" del HTML hace de altura CSS en cuanto se toca el ancho. */ img{display:block;max-width:100%;height:auto} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--lienzo);color:var(--texto); font-family:var(--sans);font-size:17px;line-height:1.65; font-weight:400;letter-spacing:-0.003em; -webkit-font-smoothing:antialiased; } ::selection{background:var(--vivo);color:var(--sobre-vivo)} .cont{max-width:1180px;margin:0 auto;padding:0 32px} .prosa{max-width:68ch} /* --- Navegación. Una línea, 64 px, sin excepciones. --- */ nav{border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:10; background:var(--lienzo-nav);backdrop-filter:blur(14px)} nav .cont{display:flex;align-items:center;gap:28px;height:64px} .marca{display:flex;align-items:center;gap:9px;color:var(--texto); text-decoration:none;font-weight:700;letter-spacing:-0.02em;margin-right:8px} .marca svg{width:17px;height:17px;flex:none} .enl{color:var(--tenue);text-decoration:none;font-size:14.5px;font-weight:500} .enl:hover{color:var(--texto)} .enl.aqui{color:var(--texto)} nav .derecha{margin-left:auto} /* --- El menú, detrás de un botón. También en escritorio. --- La barra llevaba seis enlaces, el idioma, el tema y el botón de descargar: nueve cosas compitiendo por la atención, y ninguna de ellas es a lo que viene la gente. Ahora quedan tres --- idioma, tema y descargar --- y el resto entra por el botón. No se oculta sólo en el móvil a propósito: dos navegaciones distintas según el ancho son dos navegaciones que hay que mantener, y la de escritorio siempre acaba siendo la que nadie prueba. */ .hamburguesa{width:34px;height:34px;flex:none;display:grid;place-content:center; gap:4px;border:1px solid var(--borde);border-radius:999px;background:transparent; cursor:pointer;padding:0 9px} .hamburguesa span{display:block;width:16px;height:1.5px;background:var(--tenue); border-radius:2px;transition:transform .18s,opacity .18s,background .15s} .hamburguesa:hover{border-color:var(--borde-fuerte)} .hamburguesa:hover span{background:var(--texto)} /* Abierto, las tres rayas se convierten en una equis: dice que el mismo botón cierra, sin tener que poner una segunda equis en el panel. */ .hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .menu{border-top:1px solid var(--borde);background:var(--lienzo); box-shadow:var(--sombra)} /* La lista NO reutiliza ".cont", y no es un capricho. El panel vive dentro de