/* ========================================================================= SCALAR — landing page cta-final.css — sección de cierre "Llevá tu producción a otro nivel" (id="contacto", el mismo ancla al que apunta .navbar-cta). 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 segmentos.css y ANTES de responsive.css (que es siempre el último, ver su propio comentario). Fondo CLARO, no azul sólido (primera versión, descartada): la página ya viene alternando oscuro/claro sección por sección — Hero (oscuro) → El problema/La solución (claro) → Qué hacemos (oscuro) → Por qué elegirnos (claro) → Segmentos (oscuro, foto) → acá. Un bloque azul sólido rompía ese ritmo Y quedaba pegado al celeste/azul que ya tienen los acentos de "Segmentos" (el brillo de .segmentos-grid, los bordes activos) — mucho parecido entre 2 secciones consecutivas, poco contraste real. El fondo claro, en cambio, es el salto más fuerte de toda la página justo antes del cierre: mismo criterio que .problema/.solucion (bg claro, wash de color radial detrás, ver esas 2 hojas), no vidrio nuevo. */ .cta-final{ position: relative; overflow: hidden; background: #f5f7fb; padding: 96px 64px; text-align: center; } /* Mismo wash de color que .problema::before/.solucion::after (manchas radiales blureadas en loop, ver esas hojas) — acá centrado detrás del texto en vez de sesgado a un costado, porque acá no hay una tarjeta a un lado que lo necesite más que el resto. */ .cta-final::before{ content: ''; position: absolute; inset: -10%; z-index: 0; background: radial-gradient(circle, rgba(59,107,245,0.13) 0%, transparent 60%), radial-gradient(circle, rgba(111,149,255,0.1) 0%, transparent 65%); background-repeat: no-repeat; background-size: 50% 70%, 42% 55%; background-position: 20% 30%, 82% 75%; filter: blur(70px); animation: ctaFinalGlow 32s ease-in-out infinite alternate; /* Pausado por defecto; misma IIFE mínima que .que-hacemos::before (bloque 7 de que-hacemos-scroll.js), ver js/cta-final.js. */ animation-play-state: paused; pointer-events: none; } .cta-final.is-bg-visible::before{ animation-play-state: running; } @keyframes ctaFinalGlow{ 0% { background-position: 20% 30%, 82% 75%; } 50% { background-position: 40% 55%, 65% 40%; } 100% { background-position: 25% 70%, 75% 20%; } } @media (prefers-reduced-motion: reduce){ .cta-final::before{ animation: none; } } .cta-final-inner{ position: relative; z-index: 1; max-width: 640px; margin: 0 auto; } /* Mismo componente que .problema-eyebrow/.que-hacemos-eyebrow (ver shared.css), pero centrado (acá no hay una columna de texto a la izquierda, todo el bloque está centrado) — por eso no reusa esas clases directamente, sólo el mismo lenguaje visual (línea corta + texto en mayúsculas) con su propio margin:0 auto. Colores de --blue (no --blue-light): mismo criterio que .problema-eyebrow, fondo claro. */ .cta-final-eyebrow{ display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 20px; } .cta-final-eyebrow span:last-child{ font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); } .cta-final h2{ font-size: 34px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 16px; } .cta-final h2 .accent{ color: var(--blue); } /* 15px, no 16px: mismo tamaño de "párrafo de intro" que .problema-intro p/ .solucion-copy p/.segmentos-note (ver el comentario de .problema-intro p en problema.css) — se unifica el único que quedaba distinto. */ .cta-final-sub{ font-size: 15px; line-height: 1.65; color: var(--text-muted); max-width: 480px; margin: 0 auto 36px; } .cta-final-actions{ display: flex; align-items: center; justify-content: center; margin-bottom: 48px; } /* Reusa .btn-primary tal cual (ver hero.css): fondo claro, así que el botón azul sólido de siempre ya contrasta bien — no hace falta una variante invertida como en la versión azul descartada. */ /* Fila de 3 beneficios rápidos, separada del botón por una línea tenue: refuerza la decisión de contactarse sin agregar otro bloque de texto largo — 3 frases cortas, mismo criterio de brevedad que el resto del copy del sitio. */ .cta-final-trust{ display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--surface-border); } .cta-final-trust-item{ display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); } .cta-final-trust-item svg{ width: 16px; height: 16px; flex: none; color: var(--blue); }