/* ========================================================================= SCALAR — landing page footer.css — pie de página, cierre de la landing. Es parte de la hoja de estilos, dividida en varios módulos (ver /css). IMPORTANTE — orden de carga: el ORDEN en que estos archivos se linkean en el de index.html importa, mantiene el mismo orden de cascada que tenía todo en un único styles.css. Va DESPUÉS de cta-final.css y ANTES de responsive.css (que es siempre el último, ver su propio comentario). v5 (v1-v4 se descartaron, ver historial — el intento de logo asomando por el borde superior del panel, tipo referencia de Pinterest, generaba un bug real: el margin-top negativo de .footer-mark colapsaba contra .footer-panel, que no tenía padding-top propio para contenerlo, y terminaba corriendo el panel ENTERO hacia arriba, montado sobre el CTA final. Se descarta ese recurso por completo, no sólo se parchea el bug: nada vuelve a cruzar el límite entre 2 secciones). Queda un panel oscuro simple, pegado a los 2 bordes laterales y al borde inferior real de la página (mismo criterio que .marcas-panel en segmentos.css), con las esquinas redondeadas sólo arriba — pero TODO su contenido, logo incluido, vive tranquilamente adentro, sin asomarse. */ .footer{ position: relative; background: #f5f7fb; } /* Vidrio, corregido: el intento anterior bajaba la opacidad de la base (rgba en vez de un color sólido) para "dejar pasar" blur, y el panel entero se veía descolorido/lavado — mala lectura de "efecto vidrio". Acá la base vuelve a ser sólida (el mismo degradado var(--bg)→var(--bg-2) de siempre, color intacto) y lo que se suma es sólo el BORDE de vidrio: un contorno claro sutil (1px, como el canto pulido de un panel de vidrio) + el brillo diagonal animado por encima — sin backdrop-filter (no hace falta, la base ya es opaca) y sin tocar la opacidad de nada. */ .footer-panel{ position: relative; overflow: hidden; /* contiene las curvas de nivel decorativas, ver más abajo */ border-radius: 28px 28px 0 0; /* antes 40px: contra el borde recto de abajo se veía demasiado abultado */ border: 1px solid rgba(255,255,255,0.1); border-bottom: none; /* el panel llega al borde real de la página, ver .footer más arriba: un borde inferior visible ahí no tiene sentido */ background: linear-gradient(120deg, rgba(255,255,255,0.07) 0%, transparent 35%, transparent 65%, rgba(111,149,255,0.1) 100%), linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); background-size: 250% 100%, 100% 100%; background-position: 0% 0%, 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); padding: 56px 64px 40px; animation: footerPanelSheen 24s ease-in-out infinite alternate; /* Pausado por defecto; retomado por js/footer.js sólo mientras el footer está en pantalla — mismo criterio de performance que el resto del sitio (hero-particles.js, cta-final.js, etc.). */ animation-play-state: paused; } .footer.is-bg-visible .footer-panel{ animation-play-state: running; } @keyframes footerPanelSheen{ 0% { background-position: 0% 0%, 0 0; } 100% { background-position: 100% 0%, 0 0; } } @media (prefers-reduced-motion: reduce){ .footer-panel{ animation: none; } } /* Fondo con manchas de color blureadas, mismo lenguaje que .que-hacemos::before (ver que-hacemos.css): degradados radiales suaves sobre el mismo color base del panel, sin animación. */ .footer-panel-deco{ position: absolute; inset: -10%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(63,107,245,0.16) 0%, transparent 65%), radial-gradient(circle, rgba(111,149,255,0.11) 0%, transparent 65%), radial-gradient(circle, rgba(63,107,245,0.09) 0%, transparent 70%); background-repeat: no-repeat; background-size: 55% 55%, 45% 45%, 60% 60%; background-position: 10% 20%, 85% 30%, 40% 85%; filter: blur(70px); } /* Marca centrada arriba del panel, como un elemento más de su contenido (sin negative margin, sin asomarse por ningún borde — ver el comentario al inicio del archivo sobre por qué se descartó esa idea). */ .footer-mark{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; } .footer-mark .footer-logo-img{ height: 96px; width: auto; display: block; } .footer-mark .footer-tagline-img{ width: 340px; max-width: 80vw; height: auto; display: block; } .footer-panel-inner{ position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding-top: 20px; text-align: center; } .footer-tagline{ margin-top: 10px; font-size: 15px; font-style: italic; color: var(--text-dim); } /* Antes grid de 3 columnas (contacto | acciones | navegación, "1fr auto 1fr") — la columna del medio ("Hablemos" + "Ver a quién ayudamos") se sacó del footer en todas las páginas (pedido puntual). Con sólo 2 columnas, un grid "1fr 1fr" deja a "Navegación" pegado al borde derecho de SU mitad, no al borde derecho real de la fila — con el contacto bastante más angosto que su mitad, se leía como que navegación quedaba a mitad de camino, no del todo a la derecha (pedido puntual: "dejalo bien a la derecha"). Flex + justify-content:space-between en vez de grid: cada columna ocupa sólo el ancho de su contenido real y se van a los 2 extremos de la fila, sin importar cuánto más angosta sea una que la otra. */ .footer-row{ display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 44px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.1); text-align: left; } .footer-heading{ font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 14px; } .footer-col{ display: flex; flex-direction: column; gap: 10px; } .footer-col a{ font-size: 14px; font-weight: 500; color: var(--text-dim); text-decoration: none; transition: color .2s ease; } .footer-col a:hover{ color: var(--blue-light); } .footer-col-contact{ align-items: flex-start; } .footer-social-links{ display: flex; gap: 16px; margin-top: 4px; } .footer-social-arrow{ display: inline-block; transition: transform .2s ease; } .footer-col-contact a:hover .footer-social-arrow{ transform: translate(2px, -2px); } .footer-icon-link{ display: inline-flex; } .footer-icon-link svg{ width: 20px; height: 20px; } .footer-icon-link:hover svg{ color: var(--blue-light); } /* .footer-col-actions/.btn-footer-ghost quedan sin usar a propósito, no se borran (ver historial: era la columna del medio del footer, "Hablemos" + "Ver a quién ayudamos" — sacada del HTML en todas las páginas, pedido puntual) — por si se vuelve a sumar una columna de acciones ahí más adelante. */ .footer-col-actions{ align-items: center; gap: 12px; } .footer-col-actions .btn-primary{ padding: 13px 24px; font-size: 14px; } .btn-footer-ghost{ display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); text-decoration: none; font-weight: 600; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; } .btn-footer-ghost:hover{ color: var(--blue-light); border-color: var(--blue-light); } .footer-col-nav{ align-items: flex-end; text-align: right; } /* Franja de cierre: separada del resto por un borde superior tenue. Copyright centrado, sin links legales (Privacidad/Términos): no existen esas páginas todavía, un link muerto es peor que no tenerlo. */ .footer-bottom{ margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; font-size: 13px; /* Antes rgba(255,255,255,0.4): dejaba un gris de ~3.8:1 de contraste contra el fondo casi negro del panel, por debajo del mínimo AA (4.5:1) para texto normal — mismo token que ya usan .footer-col a/.footer-tagline acá arriba, en vez de una opacidad ad-hoc. */ color: var(--text-dim); }