/* SEMBRADO desde aurox/sitios/estatico/casa.css por herramientas/sembrar_casa.py. NO se edita aquí: la siguiente siembra se lleva el cambio. */ /* La casa de Aurox: lo que comparten los CUATRO sitios. ESCRITO A MANO. Aquí vive lo que hace que aurox.mx, descarga.aurox.mx, contadores.aurox.mx y el portal se vean del mismo grupo: los cuatro colores del manual por su nombre, las superficies, el patrón de logos del fondo y los gestos (el revelado, el escáner, el encaje y las cifras que ruedan). Está aparte de `sitio.css` desde el 2026-10-08, cuando esto se llevó al portal. El portal es OTRO repositorio y lo fácil habría sido copiar y pegar: a la segunda corrección las dos copias dirían cosas distintas y nadie sabría cuál manda. Así que la fuente es este archivo, y `aurox/sitios/herramientas/sembrar_casa.py` lo copia al portal junto con `vida.js` y los dos SVG del sello. Si se edita la copia del portal, la siguiente siembra se la lleva. Lo que NO está aquí y sí en `sitio.css`: la escala de tipografía y los espacios, las piezas propias de los sitios estáticos (nav, firma, tarjetas, pie) y la tipografía de la marca, que el portal declara por su cuenta porque sus rutas son otras. */ /* ── Los cuatro del manual (pag. 9), por su nombre ─────────────────────────── Ger da cuatro colores con su CMYK, RGB y HEX; estos son esos cuatro, sin derivar nada. Los demas tokens nombran un PAPEL (--bg, --accent) y cambian con el tema; estos nombran el COLOR, que no cambia de noche a de dia. DEBERIAN venir de tokens.css: `marca/generar.py` ya los emite (se cambio el 2026-10-07). Lo que no se puede es regenerar la marca en esta maquina —pide descarga-sat, que no esta aqui, y Pillow—, asi que mientras tanto se cubre el hueco desde aqui, como `datos/descarga-congelado.json` cubre el de los precios. Cuando se regenere alla, tokens.css los trae y este bloque SE BORRA. */ :root { --m-oscuro: #162230; /* solidez, responsabilidad, confianza (manual, pag. 8) */ --m-medio: #016682; /* confianza y equilibrio */ --m-cielo: #7aacd9; /* claridad; «alguien que te acompana» */ --m-gris: #bebebe; /* innovacion y tecnologia; equilibra la paleta */ /* El degradado que Ger usa en las paginas del propio manual. Va en lo que NO lleva letra encima (aros, barras, lineas): sobre el cielo, el texto blanco da 2.1:1 y el manual mismo lo incumple en su pagina 8. Donde hay texto se usa --degradado-fondo, que acaba en el azul oscuro y si deja leer. */ /* El isotipo como MASCARA, para poder pintarlo del color que toque sin tener un SVG por color. Es el isotipo SOLO (copia de marca-oficial/): icono.svg no sirve porque trae el cuadrado redondeado del favicon detrás, y de mascara eso es un cuadrado, no la silueta. */ --sello-isotipo: url("/estatico/sello-isotipo.svg"); --sello-patron: url("/estatico/sello-patron-claro.svg"); --degradado-marca: linear-gradient(135deg, var(--m-medio), var(--m-cielo)); --degradado-fondo: linear-gradient(135deg, var(--m-medio) 0%, var(--m-oscuro) 78%); } /* ── Superficies (2026-10-07) ──────────────────────────────────────────────── Toño: «me interesa mas contraste porque se ve todo muy plano». Medido antes de tocar: de noche el fondo es #162230 y la tarjeta de vidrio quedaba en #1d2835 — 11 puntos de luz de diferencia, que a simple vista es NINGUNA. De dia, peor: el fondo #eff3f6 y la tarjeta un blanco al 42% encima, o sea casi el mismo gris. Por eso se veia plano: todo vivia sobre una sola superficie. Esto NO toca la marca. Igual que la escala tipografica, las superficies son estructura: dicen a que distancia esta cada cosa del papel, no de que color es la empresa. Los colores siguen saliendo de los cuatro de Ger. De noche la tarjeta se HUNDE (mas oscura que el fondo) en vez de flotar: ademas de separarse, sube el contraste del texto encima, que es lo contrario de lo que pasaba aclarandola. De dia la tarjeta es blanco puro contra un fondo gris azul: la misma idea al reves, y tambien sube el contraste. */ :root:not([data-tema]), [data-tema="oscuro"] { --sello-patron: url("/estatico/sello-patron-oscuro.svg"); --sup: color-mix(in srgb, var(--m-oscuro) 66%, transparent); --sup-2: color-mix(in srgb, var(--m-oscuro) 82%, transparent); --sup-linea: color-mix(in srgb, var(--m-cielo) 15%, transparent); --sup-linea2: color-mix(in srgb, var(--m-cielo) 28%, transparent); --sup-tecnica: color-mix(in srgb, var(--m-gris) 16%, transparent); --sup-rotulo: var(--m-gris); } [data-tema="claro"] { --sup: #ffffff; --sup-2: color-mix(in srgb, #ffffff 86%, var(--m-cielo)); --sup-linea: color-mix(in srgb, var(--m-medio) 16%, transparent); --sup-linea2: color-mix(in srgb, var(--m-medio) 30%, transparent); --sup-tecnica: color-mix(in srgb, var(--m-oscuro) 10%, transparent); --sup-rotulo: var(--faint); } /* ── La vida (2026-10-07) ───────────────────────────────────────────────────── Toño, encargado de diseño, lo lleva a inversionistas: «quiero que la página se sienta viva, mete efectos, colores y contraste que eleven la dopamina». Lo que se mueve vive aquí y lo enciende estatico/vida.js poniendo `html.vida`. Por qué así y no al revés: lo que se revela se esconde SÓLO detrás de esa clase, así que sin JS, con el archivo caído o con movimiento reducido la página se ve completa y quieta — y medir.mjs, que mide con movimiento reducido, mide texto que de verdad se ve. Un «opacity: 0» de salida en el CSS daría una página en blanco el día que este archivo no cargue, y un verde de contraste sobre texto invisible. Ningún color nuevo: todo sale del acento y del fondo de tokens.css (la paleta oficial de Ger). El contraste del TEXTO no se toca — la luz va detrás de él. */ /* Los orbes del fondo respiran. Son los dos que ya estaban, quietos; moverlos muy despacio y desfasados es lo que hace que la página se sienta encendida sin que nada parpadee. 19 y 23 s para que no vuelvan a coincidir. */ @keyframes aurox-respirar { from { transform: translate3d(0, 0, 0) scale(1); opacity: .8; } to { transform: translate3d(2.5vw, -2vh, 0) scale(1.22); opacity: 1; } } html.vida .luces > i { will-change: transform, opacity; } html.vida .luces > i:nth-child(1) { animation: aurox-respirar 19s ease-in-out infinite alternate; } html.vida .luces > i:nth-child(2) { animation: aurox-respirar 23s 1.5s ease-in-out infinite alternate-reverse; } /* ── Luces de fondo: sin algo que difuminar detras, el vidrio no se ve ── Los orbes se nombran como HIJOS DIRECTOS (.luces > i). Con `.luces i` a secas, los logos del patron —que tambien son , pero nietos— heredaban el blur de 120 px y no se veia ninguno. */ .luces { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .luces > i { position: absolute; display: block; border-radius: 50%; filter: blur(120px); } .luces > i:nth-child(1) { width: 620px; height: 620px; background: var(--orb1); top: -200px; left: -160px; } .luces > i:nth-child(2) { width: 520px; height: 520px; background: var(--orb2); bottom: -180px; right: -140px; } main, header, footer { position: relative; z-index: 1; } /* ── Los dos personajes (2026-10-09, en la casa) ───────────────────────────── Estaban sólo en la landing de Descarga; ahora los usa también la puerta del portal, así que viven aquí. Son el isotipo de Ger a escala 0.40: medio disco de 40 con muesca de 14.3 y cabeza de 12.9 a 14.7 del centro, el segundo invertido. SIN BRAZOS: el apretón ya está en que los dos cuerpos se entrelazan, y en el cuadro en que se juntan lo que se ve ES el logo. */ .los-dos { display: block; width: 100%; height: auto; overflow: visible; } .los-dos .cuerpo { fill: var(--m-cielo); } .los-dos .chispa { fill: none; stroke-width: 3; opacity: 0; stroke: color-mix(in srgb, var(--head) 80%, var(--m-cielo)); transform-origin: 260px 107px; } @keyframes dos-junta-izq { 0%, 44% { transform: translateX(0); } 55% { transform: translateX(58.4px); } 58% { transform: translateX(61.4px); } 62% { transform: translateX(57.2px); } 65% { transform: translateX(60.4px); } 69%, 88% { transform: translateX(58.4px); } 100% { transform: translateX(0); } } @keyframes dos-junta-der { 0%, 44% { transform: translateX(0); } 55% { transform: translateX(-58.4px); } 58% { transform: translateX(-61.4px); } 62% { transform: translateX(-57.2px); } 65% { transform: translateX(-60.4px); } 69%, 88% { transform: translateX(-58.4px); } 100% { transform: translateX(0); } } @keyframes dos-contacto { 0%, 53% { transform: scale(.25); opacity: 0; } 56% { opacity: .9; } 72%, 100% { transform: scale(3.1); opacity: 0; } } @keyframes dos-bote-arriba { 0%, 54%, 100% { transform: translateY(0); } 58% { transform: translateY(-4.5px); } 63% { transform: translateY(1.5px); } 68% { transform: translateY(0); } } @keyframes dos-bote-abajo { 0%, 54%, 100% { transform: translateY(0); } 58% { transform: translateY(4.5px); } 63% { transform: translateY(-1.5px); } 68% { transform: translateY(0); } } html.vida .los-dos .uno { animation: dos-junta-izq 7s cubic-bezier(.3,.8,.3,1) infinite; } html.vida .los-dos .otro { animation: dos-junta-der 7s cubic-bezier(.3,.8,.3,1) infinite; } html.vida .los-dos .chispa { animation: dos-contacto 7s cubic-bezier(.2,.7,.3,1) infinite; } html.vida .los-dos .cab-uno { animation: dos-bote-arriba 7s cubic-bezier(.3,.8,.3,1) infinite; } html.vida .los-dos .cab-otro { animation: dos-bote-abajo 7s cubic-bezier(.3,.8,.3,1) infinite; } /* En la puerta del portal van más chicos y con aire: ahí el protagonista es el formulario, no ellos. */ .los-dos-puerta { max-width: 260px; margin: 0 auto var(--s-4, 24px); opacity: .9; } /* ── La burbuja del título (2026-10-09) ────────────────────────────────────── Toño, de la sección del despacho: «cada que abro una pestaña el título sólo lo divide una línea delgada, no me gusta; me agrada la idea de la transparencia, hazlo como una burbuja transparente con degradado». Era un `border-bottom: 1px` — la convención de siempre para separar la cabecera del contenido, y lo más parecido a no haber decidido nada. Ahora el título va en una pieza de vidrio con el degradado de la casa: el azul medio entrando por la esquina de arriba a la izquierda y disolviéndose en nada hacia la derecha. El degradado va como `background-image` SOBRE el color sólido de la superficie, no en lugar de él: `medir.mjs` compone el contraste leyendo `backgroundColor`, y sin el color de debajo mediría el texto contra el fondo de la página y daría un verde que no corresponde. Y por eso el degradado es tenue (18% como mucho): lo que tiene que leerse es el título, no el cristal. */ .burbuja { position: relative; border-radius: var(--r-tarjeta, 22px); border: 1px solid var(--sup-linea); background-color: var(--sup); background-image: linear-gradient(135deg, color-mix(in srgb, var(--m-medio) 18%, transparent) 0%, color-mix(in srgb, var(--m-cielo) 9%, transparent) 46%, transparent 78%); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px); box-shadow: var(--glass); } /* Un hilo del degradado de la marca arriba, que es lo que la ata a la casa: el mismo recurso que lleva la banda de «Tus datos» en Descarga. */ .burbuja::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: var(--r-tarjeta, 22px) var(--r-tarjeta, 22px) 0 0; background: var(--degradado-marca); opacity: .75; } /* ── El paso de una página a otra (2026-10-09) ─────────────────────────────── Hasta ahora, ir de una página a otra era un parpadeo en blanco: el navegador tira la anterior y pinta la siguiente. En un sitio con cuatro dominios y páginas que se visitan en cadena —el hub lleva a Descarga, Descarga a su ayuda, Contadores al portal— ese parpadeo es lo que más delata que son páginas sueltas y no un producto. Con esto, el navegador funde una con otra. Son dos líneas y no cuestan nada: donde no esté soportado, se pasa como siempre y no se rompe nada. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ── Detalles que nadie nombra pero todos ven ──────────────────────────────── Seleccionar texto y el foco del teclado son dos cosas que pasan en todas las páginas, cientos de veces al día, y que casi siempre se quedan con el azul que trae el navegador de fábrica. Puestos en el color de la casa, el sitio se siente terminado sin que nadie sepa decir por qué. */ ::selection { background: color-mix(in srgb, var(--m-cielo) 42%, transparent); color: var(--head); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ── El patrón de logos (2026-10-07; independizado el 2026-10-09) ──────────── Isotipos sueltos por el fondo que flotan solos y se apartan del puntero. Vive en SU PROPIO contenedor y sus piezas son `