/* ========================================================================= SCALAR — landing page solucion.css — sección "La solución" (fondo claro). 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. Si se agrega un archivo nuevo hay que linkearlo en el lugar que corresponda: 1. variables.css — paleta de colores y tokens (:root) 2. base.css — reset y estilos base de html/body 3. shared.css — componentes reutilizados entre 2+ secciones (línea divisoria, eyebrow, keyframe de brillo) 4. navbar.css — navbar fija (logo, links, cta, versión compacta) 5. hero.css — hero (imagen, texto, botones, leyenda rotativa) 6. layout.css — .split-view ("El problema" + "La solución" juntas) 7. problema.css — sección "El problema" (fondo claro) 8. solucion.css — sección "La solución" (fondo claro) 9. que-hacemos.css — sección "Qué hacemos" (fondo oscuro, timeline) 10. por-que-elegirnos.css — sección "Por qué elegirnos" (fondo claro, 4 cols) 11. segmentos.css — sección "Para cada etapa de tu negocio" (fondo oscuro) 12. responsive.css — ajustes de tablet, mobile y celulares chicos shared.css (3) va TEMPRANO a propósito: junta reglas que usan 2 o más secciones (ej. .divider-line lo usan hero/problema/solucion/que-hacemos/ por-que-elegirnos/segmentos), así que no puede vivir adentro del archivo de una sola sección — si agregás un componente nuevo usado por 2+ secciones, va ahí, no repetido en cada una. ========================================================================= */ /* ---------- 7. Sección "La solución" ---------- Fondo claro también, pero un tono apenas más frío/azulado (#f5f7fb) que #fdfdfd de "El problema", para que se note el cambio de sección sin necesidad de una línea divisoria dura. 2 columnas: título / copy (antes había una 3ra con el diagrama .solucion-visual, sacada del HTML por pedido de simplificar — el CSS de acá abajo, de ".solucion-visual" en adelante, queda sin usar a propósito, no se borra, para poder volver atrás fácil si hace falta). */ .solucion{ position: relative; overflow: hidden; /* contiene el wash de color de .solucion::after, ver más abajo */ background: #f5f7fb; color: var(--ink); padding: 0 64px; /* el alto vertical ahora lo da .split-view (mitad de 100vh), no padding propio */ } /* Mismo wash de color que .problema::before (manchas radiales blureadas en movimiento lento, ver problema.css), acá sesgado a la derecha porque ahí vive .solucion-visual — la tarjeta de vidrio necesita ese color detrás para que el backdrop-filter tenga algo real que desenfocar. */ .solucion::after{ content: ''; position: absolute; inset: -10%; z-index: 0; background: radial-gradient(circle, rgba(59,107,245,0.12) 0%, transparent 60%), radial-gradient(circle, rgba(111,149,255,0.09) 0%, transparent 65%); background-repeat: no-repeat; background-size: 45% 65%, 38% 55%; background-position: 82% 25%, 70% 80%; filter: blur(60px); animation: solucionGlow 34s ease-in-out infinite alternate; /* Pausado por defecto; problema-carousel.js lo retoma sólo mientras la sección está en pantalla (clase .is-bg-visible en .solucion) — mismo criterio de performance que .hero::before/.que-hacemos::before/ .segmentos-grid. */ animation-play-state: paused; pointer-events: none; } .solucion.is-bg-visible::after{ animation-play-state: running; } @keyframes solucionGlow{ 0% { background-position: 82% 25%, 70% 80%; } 50% { background-position: 68% 50%, 85% 55%; } 100% { background-position: 75% 70%, 60% 35%; } } @media (prefers-reduced-motion: reduce){ .solucion::after{ animation: none; } } /* Línea divisoria con "El problema", pero prolija: en vez de un borde sólido de punta a punta (que con dos blancos casi iguales se veía como una línea gris fea/accidental, no como algo diseñado), es un degradado que se desvanece hacia los dos costados — sólo se nota bien en el centro, como un acento sutil, en vez de un corte duro de pared a pared. Mismo azul de marca que el resto de las líneas del sitio (.divider-line), pero muy tenue (0.25 de opacidad) porque acá cubre TODO el ancho, no un tramo corto de 20-28px como en los eyebrows. */ .solucion::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(59,107,245,0.28) 50%, transparent); } .solucion-inner{ position: relative; z-index: 1; /* arriba del wash de .solucion::after */ max-width: 1440px; margin: 0 auto; display: grid; /* Antes 1fr 1fr 1.2fr (título/copy/diagrama). Sin la 3ra columna, el copy pasa a llevarse más espacio propio (era la columna angosta del medio) para no quedar corto de aire al lado del título. */ grid-template-columns: 0.85fr 1.4fr; gap: 64px; align-items: center; } .solucion-title h2{ /* Mismo tamaño que .problema-intro h2 (32px): son las 2 mitades de un mismo .split-view, tiene que leerse como un par parejo. Sigue siendo más chico que el resto de los h2 del sitio (34px) a propósito: acá comparte fila con 2 columnas más (copy + imagen) en la mitad del alto de una sección normal, menos aire que .que-hacemos-title/.pqe-title/ etc, que tienen la sección entera para respirar. */ font-size: 32px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; } .solucion-title h2 .accent{ color: var(--blue); } /* Oculta por defecto (desktop/tablet, columnas lado a lado — el propio espacio entre columnas ya separa el título del resto). Se muestra sólo en mobile (ver @media max-width:767px), donde el título queda apilado solo arriba de todo. Clase propia, no reusa .problema-divider, para no afectarle la suya (esa sí se ve siempre, en todos los anchos). Usa .divider-line (ver sección 1) para el grosor/color base, con su propio ancho y el display:none por defecto. */ .solucion-divider{ display: none; width: 28px; /* Sólo margin-top (no bottom): a diferencia de .problema-divider, acá .solucion-title y .solucion-copy son 2 items de grid distintos, ya separados por el gap del grid (32px en mobile). Con margin-bottom además, ese 32 se sumaba a otros 24 más → 56px hasta el copy, mucho más separado que los 16px entre los 2 párrafos del copy. Con esto el espacio hasta el copy queda en los 32px del gap, sin duplicar. */ margin: 24px 0 0; } .solucion-copy p{ font-size: 15px; line-height: 1.7; color: var(--text-muted); } .solucion-copy p + p{ margin-top: 16px; } /* Antes esto era un

aparte (2do párrafo del bloque, sacado al simplificar el contenido, ver comentario arriba del todo del archivo). La frase que resaltaba ("no vendemos tecnología genérica") ahora vive adentro del único párrafo que queda, como inline — mismo resalte (negrita + color pleno en vez del muted del resto del párrafo), sin ser un bloque propio. */ .solucion-copy p strong{ font-weight: 700; color: var(--ink); } /* .solucion-copy-strong queda sin usar a propósito, no se borra (ver comentario arriba del archivo) — por si se revierte el recorte de contenido y vuelve a hacer falta el 2do párrafo como bloque propio. */ .solucion-copy-strong{ font-weight: 700; color: var(--ink) !important; } /* Vesto/Audaces (ver comentario en el HTML): separados del párrafo por una línea fina, mismo criterio visual que .footer-row (línea + contenido debajo) pero en la paleta clara de esta sección. */ .solucion-partners{ margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--surface-border); } .solucion-partners-label{ margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .solucion-partners-row{ display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } /* Antes esto era "sin tarjeta": 2 rondas de tarjeta con sombra ya se habían probado y no cerraban, así que se pasó a logos sueltos separados por una línea vertical (ver historial, .solucion-partners-divider más abajo queda sin usar por eso) — pero ahí perdían toda pinta de acción, se leían como un simple listado de marcas, no algo para clickear (pedido puntual: "quiero que se note que son botones"). Ahora son píldoras: borde propio + fondo blanco + una flechita en un círculo al final (ver .solucion-partner-arrow) que en reposo está "guardada" (ancho 0, opacity 0) y se despliega al hover/focus — la combinación borde+flecha es la que hace leible "esto se puede clickear" de un vistazo, sin volver a la tarjeta con sombra que ya se había descartado (esto es una forma distinta: contorno, no relleno ni sombra). Es un a la página propia de cada empresa (audaces.html/ vesto.html, ver css/partner-page.css) — antes fue un