/* ========================================================================== footer.css — pie de página completo, compartido por TODA la web (home incluida). Se carga después de styles.css / pages.css y no depende de sus variables: fija sus propios colores para verse igual en cualquier página. ========================================================================== */ .mj-footer{ --f-bg:#0b170c; --f-ink:#f5f4f2; --f-mut:#9db09a; --f-mut2:#6f8570; --f-line:rgba(245,244,242,.09); --f-lime:#C7FF2E; position:relative; z-index:2; background:var(--f-bg); border-top:1px solid var(--f-line); color:var(--f-ink); font-family:"Geist",system-ui,-apple-system,sans-serif; padding:104px 24px 34px; margin-top:0; } /* ---- textura del pie ---- La misma pieza iridiscente que remata los nucleos (cta-demo.webp), aqui muy apagada: le da cuerpo al verde plano sin competir con el texto. Se reutiliza el asset que ya existe en vez de generar otro, asi que en las paginas de nucleo ni siquiera es una descarga nueva. Dos cosas la mantienen discreta: la opacidad baja y una mascara que la desvanece hacia la izquierda, que es justo donde vive el texto. Va en un ::before con pointer-events:none, y .mj-in sube a z-index 1 para quedar siempre por encima. */ .mj-footer::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:url("/assets/nucleos/cta-demo.webp?v=2") right center / cover no-repeat; opacity:.15; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 52%, #000 100%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 52%, #000 100%); } .mj-footer .mj-in{ position:relative; z-index:1; } /* en movil el pie es estrecho y la textura queda debajo del texto en vez de al lado: se apaga aun mas para que no reste legibilidad */ @media(max-width:820px){ .mj-footer::before{ opacity:.09; } } .mj-footer *{ box-sizing:border-box; } .mj-footer a{ text-decoration:none; color:inherit; } .mj-in{ width:100%; max-width:1120px; margin:0 auto; } /* ---- banda superior: marca + trabaja con nosotros ---- */ .mj-top{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding-bottom:56px; border-bottom:1px solid var(--f-line); } .mj-brand .logo{ font-family:"Geist",system-ui,sans-serif; font-weight:600; font-size:26px; letter-spacing:-.02em; color:var(--f-ink); display:inline-flex; align-items:center; line-height:1; } .mj-brand .logo .pill{ display:inline-flex; align-items:center; background:var(--f-lime); color:#0F0F0F; font-weight:700; font-size:.58em; letter-spacing:-.01em; line-height:1; border-radius:.34em; padding:.16em .4em .2em; margin-left:.16em; vertical-align:.06em; } .mj-brand p{ color:var(--f-mut); font-size:15.5px; line-height:1.6; margin:16px 0 0; max-width:46ch; } /* Cristal, no transparencia a secas. La tarjeta llevaba un degradado casi transparente y funcionaba mientras el pie era verde plano; con la textura detras, la trama se colaba por debajo del parrafo y no habia quien lo leyera. El backdrop-filter desenfoca lo que pasa por detras y el tinte le devuelve una base solida al texto: se ve que hay algo debajo, pero borroso. El color de respaldo va SIN backdrop-filter para navegadores que no lo soporten (queda opaco, que es peor de aspecto pero legible igual). */ .mj-join{ position:relative; border:1px solid rgba(199,255,46,.3); background:rgba(9,20,10,.72); border-radius:22px; padding:26px 26px 28px; overflow:hidden; box-shadow:0 18px 40px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(245,244,242,.07); } @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) { .mj-join{ background:linear-gradient(135deg, rgba(199,255,46,.10), rgba(9,20,10,.42) 62%); -webkit-backdrop-filter:blur(16px) saturate(125%); backdrop-filter:blur(16px) saturate(125%); } } .mj-join .k{ font-family:"Geist Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--f-lime); } .mj-join h3{ font-family:"Geist",system-ui,sans-serif; font-weight:600; font-size:21px; letter-spacing:-.025em; color:var(--f-ink); margin:12px 0 0; } .mj-join p{ color:#C3D2C0; font-size:14.5px; line-height:1.55; margin:9px 0 0; } .mj-join a{ display:inline-flex; align-items:center; gap:9px; margin-top:18px; background:var(--f-lime); color:#0b170c; font-weight:600; font-size:15px; border-radius:999px; padding:13px 22px; transition:transform .2s, box-shadow .2s; } .mj-join a:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(199,255,46,.6); } .mj-join a svg{ width:15px; height:15px; } /* ---- columnas ---- */ .mj-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; padding:56px 0 52px; } .mj-cols h4{ font-family:"Geist Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--f-mut2); font-weight:400; margin:0 0 16px; } .mj-cols ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; } .mj-cols li{ margin:0; } .mj-cols a, .mj-cols span{ color:var(--f-mut); font-size:15px; transition:color .18s; } .mj-cols a:hover{ color:var(--f-lime); } /* ---- barra inferior ---- */ .mj-bottom{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between; padding-top:24px; border-top:1px solid var(--f-line); } .mj-bottom small{ font-family:"Geist Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.05em; color:var(--f-mut2); } .mj-legal{ display:flex; flex-wrap:wrap; gap:8px 20px; } .mj-legal a{ font-size:13.5px; color:var(--f-mut2); transition:color .18s; } .mj-legal a:hover{ color:var(--f-lime); } @media(max-width:900px){ .mj-top{ grid-template-columns:1fr; gap:32px; } .mj-cols{ grid-template-columns:repeat(2,1fr); gap:32px 24px; } } @media(max-width:560px){ .mj-footer{ padding:76px 20px 26px; } .mj-cols{ grid-template-columns:1fr; gap:30px; } .mj-bottom{ justify-content:flex-start; } } /* en modo chat (home) el pie desaparece, como el resto de la intro */ html.chatting .mj-footer{ display:none; } /* ⚠️ El pie usa un