/* ============================================================ EL MARCO: LA BARRA DE ARRIBA Y EL PIE ------------------------------------------------------------ Esta hoja la carga TODA pagina del sitio, reescrita o no, y por eso sus nombres son propios —.cab, .drop, .mapa, .pie-fin— y no genericos. La leccion viene de equivocarme: metí el lenguaje entero en el plano y `.p` y `.lista`, que alli significan otra cosa, se llevaron la pagina por delante. Dos hojas con los mismos nombres no conviven. Las tres medidas que necesita las declara por su cuenta, con el mismo valor que en xioon.css, para no depender de que esa hoja este cargada. ============================================================ */ :root{ /* EL FONDO. Un solo sitio. Lo que haya aqui manda en toda la web: pantallas, tarjetas, barra, plano y cotizador. POR QUE ESTE AZUL Y NO OTRO. El azul de la marca es #15253d. Un azul elegante no se elige de una paleta: se saca del que ya tienes. --fondo es ese mismo azul bajado de luz hasta poder llevar texto blanco encima sin cansar, y --fondo-2 es el de la marca tal cual, que es lo que se ve en las cajas. Asi el azul de la pantalla es el suyo, no uno parecido, y el fondo y las tarjetas son parientes en vez de dos decisiones sueltas. Para volver al negro: #07080a / #0d0e11 / #16181c. Este es el unico sitio donde hay que tocarlo. */ --fondo:#0d1a2d; --fondo-2:#15253d; --fondo-3:#1c3050; /* ---------- LA PALETA OFICIAL ---------- De BRANDBOARD_GRUPOXIOON_2026, hecho en Illustrator el 22 de junio de 2026. Hasta que llegó ese PDF la línea gráfica se venía DEDUCIENDO del Instagram; esto ya no es deducción, es el documento. Los hex son los que el propio brandboard escribe, no los que salen de convertir su CMYK: Illustrator los pinta un punto distintos al renderizar (#03223e, #1c3f71, #e4a746) y el que manda es el escrito. MEDIDO, no estimado. Lo que cada uno puede hacer: color sobre blanco sobre --fondo-2 #15253d navy 15,40 letra — #20386a azul 11,44 letra 1,35 mancha #e7aa3a dorado 2,06 MANCHA 7,49 letra #f3ee99 amarillo 1,20 MANCHA 12,83 letra #a05516 ámbar 5,52 letra 2,79 mancha O sea: los dos cálidos claros son de FONDO OSCURO y el ámbar es el único cálido que aguanta como letra sobre blanco. El dorado sobre blanco NO es letra —da 2,06— y ese es justo el error que se comete al "poner el color de la marca" en una página clara. --marca-azul es el fondo sobre el que el brandboard apoya el logo en su página 2, que no es --fondo-2 ni --fondo-3. */ --marca-navy:#15253d; --marca-azul:#20386a; --marca-oro:#e7aa3a; --marca-maiz:#f3ee99; --marca-ambar:#a05516; /* El azul de marca a un 12 %: sobre blanco queda #e4e7ed. Es para apoyar cosas encima, no para escribir: sirve de cama a un recorte o a una caja, igual que --cian-12 pero sin salirse de la paleta. */ --marca-azul-12:rgba(32,56,106,.12); /* LA TIPOGRAFIA DEL BRANDBOARD ES "Myriad Variable Concept", y el sitio NO la usa: va con Archivo, a proposito. Preguntado y respondido el 3 de noviembre de 2026. Dos razones: Myriad Variable Concept es de las fuentes que Adobe reparte con Illustrator —su uso web pasaria por Adobe Fonts con cuenta de Creative Cloud, y ni siquiera esta claro que la ofrezcan para web—, y la portada esta construida sobre la negra condensada de Archivo: cambiarla le cambia el caracter a la pantalla entera. Esto es una divergencia DECIDIDA del brandboard, no un descuido. No hace falta volver a proponerlo. */ /* EL ACENTO DE LA LINEA. El mismo cian que lleva el CRM desde que se le cambio la paleta (--gold en panel-claro.css, que ya no es dorado): asi el color que dice "esto se puede tocar" es uno solo desde la portada hasta el panel. Elegido por contraste, no por gusto. Medido sobre blanco: #0e7490 da 5,37:1, asi que aguanta como LETRA pequena y no solo como mancha de fondo —que es donde se cae la mitad de los acentos de paleta—. --cian-t es la version para texto sobre el tinte claro: 6,4:1 sobre --cian-12. NO es el lima de Ontario. Esa web fue la referencia de ESTRUCTURA; su #cbf000 es suyo y no se copia. */ --cian:#0e7490; --cian-t:#0b5b70; --cian-12:rgba(14,116,144,.12); --gut:clamp(20px,4.2vw,64px); --mini:.6875rem; } /* ============================================================ LA BARRA DE ARRIBA Todo visible, siempre. Ocho enlaces no caben en un teléfono de 375 px, así que abajo de 980 px la barra no se esconde detrás de un botón: se convierte en una tira que se arrastra con el dedo. Nada queda a un toque de distancia. TRES ESTADOS, Y EL DEL MEDIO ERA EL QUE FALTABA. Arriba del todo la barra es transparente, para que el titular de la portada se vea entero. En cuanto se baja un poco se vuelve opaca (.cab--pega): sin eso, el logo y los ocho enlaces quedan flotando sobre el texto de la pagina y se lee uno encima del otro. Esa clase existia desde el principio pero solo la ponia el script de la portada, asi que en las otras diecinueve paginas la barra se pasaba el scroll entero transparente. Y si se sigue bajando, se aparta del todo (.cab--huida) y vuelve al primer gesto de subir, que es lo que hace que no estorbe nunca. ============================================================ */ .hilo{position:fixed;top:0;left:0;right:0;z-index:50;height:2px;background:#fff; transform:scaleX(0);transform-origin:0 50%; transition:opacity .3s} body>.cab,#marco>.cab,.cab{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between; gap:24px;padding:20px var(--gut); transition:transform .45s cubic-bezier(.2,.8,.2,1), padding .4s cubic-bezier(.2,.8,.2,1),background .4s,backdrop-filter .4s,box-shadow .4s} .cab--pega{padding-block:11px; background:color-mix(in srgb, var(--fondo) 86%, transparent); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); box-shadow:0 1px 0 rgba(255,255,255,.09), 0 18px 40px -28px rgba(0,0,0,.9)} /* Se aparta. El hilo de progreso se queda: dos pixeles en el borde de la pantalla no estorban a nadie y son la unica pista de cuanto falta. El desplegable si se va con ella, que si no queda un panel colgando de una barra que ya no esta. */ .cab--huida{transform:translateY(-100%)} .cab--huida+.drop__m{opacity:0;visibility:hidden} .cab img{height:28px;width:auto;transition:height .4s cubic-bezier(.2,.8,.2,1)} .cab--pega img{height:23px} /* Un ancla no debe aterrizar debajo de la barra. El alto real lo mide marco.js y lo deja en --alto-cab; el 86 es el suelo por si el script no llega. */ html{scroll-padding-top:calc(var(--alto-cab, 86px) + 14px)} .cab .nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);background:0;padding:0;position:static;box-shadow:none} .cab .nav a{color:rgba(255,255,255,.7);text-decoration:none;font-size:.75rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;transition:color .3s} .cab .nav a:hover,.cab .nav a[aria-current="page"]{color:#fff} .chispa{display:inline-flex;align-items:center;gap:6px} .chispa svg{opacity:.85} .cab .nav__cta{padding:11px 20px;border-radius:999px;background:#fff;color:var(--fondo) !important;font-weight:700} .cab .nav__cta--linea{background:0;color:#fff !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)} .cab .nav__cta--linea:hover{background:rgba(255,255,255,.12)} /* El desplegable de proyectos: los tres con lo que queda de cada uno. Un menú que además informa vale por dos. Vive fuera del