/* ============================================= Portal público de vacantes — Alimentos El Zarzal --------------------------------------------- Tres colores y nada más: AZUL OSCURO, AZUL CLARO y BLANCO. El azul claro es el de la marca (el del logotipo) y sustituye al dorado que hacía de acento; los cremas pasaron a blanco. La maquetación no cambió: solo el color. Los nombres de las variables se conservan aunque digan «oro» o «crema» porque se usan en cien sitios del archivo; lo que cambió es su valor. Para no repintar, basta con tocar este bloque. ============================================= */ :root { --zz-marino: #13273F; /* azul oscuro: fondo de cabecera y pie */ --zz-marino-o: #0D1B30; /* azul oscuro, un punto más profundo */ /* Antes dorado. Ahora el azul claro de la marca, que es el acento. */ --zz-oro: #3E7BC4; --zz-oro-osc: #2B5F9E; /* Azul claro desaturado, solo para el fondo animado */ --zz-oro-pastel: #9CC3EC; /* Antes cremas. Ahora blanco y blancos con una gota de azul, que es lo que separa una sección de otra sin ensuciar. */ --zz-crema: #FFFFFF; --zz-crema-2: #F2F6FB; --zz-borde: #DCE6F2; --zz-borde-2: #C9D8EA; --zz-borde-3: #E7EEF7; /* Textos: azules desaturados en vez de grises neutros, para que todo pertenezca a la misma familia. */ --zz-texto: #46586F; --zz-texto-2: #23384F; --zz-gris: #7C90A8; --zz-gris-2: #6B819B; --zz-claro: #A9C2DD; --zz-claro-2: #C6D8EC; --zz-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif; --zz-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --zz-ancho: 1160px; --zz-curva: cubic-bezier(.22, 1, .36, 1); } * { box-sizing: border-box; } /* El color de fondo va en , no en : los símbolos flotantes se pintan detrás de todo con z-index negativo y un opaco los taparía. El degradado recorre TODA la altura del documento (no la ventana), así que la página se va oscureciendo a medida que se baja. Arranca en blanco puro y baja hacia un blanco azulado muy tenue, que prepara la entrada del azul oscuro del pie sin introducir ningún color ajeno a la paleta. */ html { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 20%, #F7FAFD 42%, #EFF4FA 64%, #E7EEF7 83%, #DCE6F2 100%) no-repeat; background-attachment: scroll; min-height: 100%; } body { margin: 0; background: transparent; color: var(--zz-texto); font-family: var(--zz-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ============================================= Fondo animado: símbolos que suben y se desvanecen --------------------------------------------- Capa fija detrás de todo. Solo asoma por las zonas de fondo blanco — la cabecera, los pilares, los valores y el pie son opacos y la tapan, así que el efecto respira en lugar de saturar la página. ============================================= */ .zz-fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .zz-simbolo { position: absolute; bottom: -140px; /* Azul claro desaturado: se nota sin gritar sobre el blanco */ color: var(--zz-oro-pastel); opacity: 0; will-change: transform, opacity; animation-name: zz-asciende; animation-timing-function: linear; animation-iteration-count: infinite; } /* El parpadeo va en el