/* ========================================================================= SCALAR — landing page segmentos.css — sección "Para cada etapa de tu negocio" (fondo oscuro, 6 segmentos con watermark de fondo que va cambiando). 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/esta sección), 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. ========================================================================= */ /* ---------- 11. Sección "Para cada etapa de tu negocio" ---------- Vuelve a fondo oscuro después de "Por qué elegirnos" (claro) — mismo criterio de contraste que alterna el resto del sitio. Reusa var(--bg)/ var(--text)/var(--blue-light) de "Qué hacemos" (misma paleta de fondo oscuro), y el eyebrow compartido (.que-hacemos-eyebrow, ver shared.css) en vez de crear uno nuevo — mismo look que el resto de las secciones oscuras. */ .segmentos{ position: relative; background: var(--bg); color: var(--text); /* Sin padding-bottom: ese espacio ahora lo da el propio .marcas-panel (ver más abajo) con su padding interno — así el panel puede llegar hasta el borde inferior REAL de la sección en vez de quedar flotando adentro del padding, que es justo lo que se buscaba (que se sienta como el footer de la sección, no una tarjeta más). */ padding: 64px 64px 0; /* overflow:hidden contiene los watermarks de fondo (.segmentos-bg-layer), que son íconos grandes parcialmente recortados fuera del borde. */ overflow: hidden; } /* Fondo fotográfico: 6 fotos reales (una por segmento, ver img/etapas/), todas apiladas ocupando el 100% de la sección (inset:0) — el cross-fade entre una y otra es sólo un cambio de opacidad (barato de animar), sin reacomodar posición ni tamaño. pointer-events:none porque son puramente decorativas (aria-hidden en el HTML). z-index:0, por detrás de .segmentos-inner (z-index:1). .segmentos-bg::after es un velo oscuro FIJO por encima de las 6 fotos (mismo tono que var(--bg), la sección es de fondo oscuro): sin esto, el eyebrow/título/grid de íconos perdían contraste apenas alguna foto tenía una zona clara — con el velo, cualquiera de las 6 queda igual de tenue y legible detrás del texto, sin tener que calibrar el brillo foto por foto. */ .segmentos-bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .segmentos-bg-layer{ position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; } .segmentos-bg-layer img{ width: 100%; height: 100%; object-fit: cover; /* Sin este filtro cada foto se veía "suelta": colores propios (piel, tela, madera) compitiendo con la paleta fría/azul del resto del sitio. grayscale+brightness bajan la saturación/luz propia de la foto para que el tinte azul de .segmentos-bg-tint (más abajo) sea el que defina el color final, no la foto original. */ filter: grayscale(0.55) brightness(0.6) contrast(1.08); } .segmentos-bg-layer.is-active{ opacity: 1; } /* Capa de color: tiñe las 6 fotos (ya en blanco y negro por el filter de arriba) del mismo azul de marca, mix-blend-mode:color aplica el matiz de --blue conservando la luminosidad de cada foto — el resultado es un duotono azul/oscuro coherente con el resto del sitio en vez de fotos a todo color superpuestas a una sección de marca. Vive ARRIBA de las 6 fotos (último hijo antes del velo) pero DEBAJO del velo oscuro final (.segmentos-bg::after, ver más abajo). */ .segmentos-bg-tint{ position: absolute; inset: 0; background: var(--blue); mix-blend-mode: color; opacity: 0.32; } .segmentos-bg::after{ content: ''; position: absolute; inset: 0; background: rgba(4,7,14,0.6); } .segmentos-inner{ position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; } .segmentos-title{ font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; max-width: 640px; margin-bottom: 40px; } .segmentos-title .accent{ color: var(--blue-light); } /* VARIANTE EXPERIMENTAL — "barra única": en vez de 6 tarjetas sueltas con gap entre ellas, una sola caja larga (fondo+blur+borde, mismo lenguaje que la variante de tarjetas elegida antes) que contiene los 6 puntos como si fueran pestañas de un mismo control — y un "pill" que se desliza por dentro (.segmento-highlight, ver más abajo) marcando cuál está activo, en vez de que cada punto tenga su propio glow. display:flex (no grid): los 6 items se reparten el ancho en partes iguales (flex:1 cada uno, ver .segmento-item), que es lo que necesita el pill para calcular dónde pararse. */ .segmentos-grid{ position: relative; display: flex; padding: 8px; border-radius: 22px; /* Vidrio con un poco más de vida: al fondo semitransparente de antes se le suma un degradado diagonal muy tenue (celeste), corrido bien ancho (250% de background-size) para que sólo se note un brillo suave recorriendo la barra, no una franja dura — más el bisel de vidrio de abajo (inset arriba claro / abajo oscuro), que le da un poquito de volumen a la caja en vez de verse un rectángulo plano semitransparente. */ background: linear-gradient(120deg, rgba(111,149,255,0.14) 0%, transparent 35%, transparent 65%, rgba(111,149,255,0.1) 100%), rgba(0,0,0,0.045); background-size: 250% 100%, 100% 100%; background-position: 0% 0%, 0 0; border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Recorrido lento del brillo (36s, mismo orden de magnitud que el fondo animado de "Qué hacemos"/hero) — pausado por defecto, segmentos.js lo retoma sólo mientras la sección está en pantalla (.is-bg-visible), mismo criterio de performance que el resto del sitio: una animación infinita no debe correr en una sección que el usuario nunca llegó a ver. */ animation: segmentBarSheen 22s ease-in-out infinite alternate; animation-play-state: paused; } .segmentos.is-bg-visible .segmentos-grid{ animation-play-state: running; } @keyframes segmentBarSheen{ 0% { background-position: 0% 0%, 0 0; } 100% { background-position: 100% 0%, 0 0; } } @media (prefers-reduced-motion: reduce){ .segmentos-grid{ animation: none; } } /* El "pill" que se desliza: posición/ancho los calcula segmentos.js (mide el item activo con getBoundingClientRect, no depende de que los 6 sean exactamente 1/6 cada uno — así funciona igual si el texto de alguno fuerza un ancho de columna distinto). transform (no left) para que la animación la resuelva el compositor, no layout — más fluido en el deslizamiento que "left" con transition. */ .segmento-highlight{ position: absolute; top: 8px; bottom: 8px; left: 0; border-radius: 16px; background: rgba(0,0,0,0.1); border: 1px solid var(--blue-light); box-shadow: 0 0 0 1px rgba(111,149,255,0.25), 0 0 20px rgba(111,149,255,0.35); transition: transform .5s var(--ease-smooth), width .5s var(--ease-smooth); pointer-events: none; z-index: 0; /* overflow:hidden recorta el .segmento-highlight-fill (más abajo) a la misma esquina redondeada del pill — sin esto el relleno cuadrado se saldría por las puntas redondeadas. */ overflow: hidden; } @media (prefers-reduced-motion: reduce){ .segmento-highlight{ transition: none; } } /* LA "VUELTA DE ROSCA": barra de progreso adentro del pill, pegada abajo — se llena de 0 a 100% durante los 4s que ese segmento está activo (ver segmentos.js, reinicia la animación en cada highlight()) y vuelve a 0 de golpe al saltar al siguiente. Convierte el auto-cycle de "algo que pasa solo" a algo con una cuenta regresiva visible — más el pill ahora reacciona al tap/click (ver segmentos.js), pasa de ser sólo decorativo a sentirse como un control real, tipo las Stories de Instagram. Arranca en 0 (sin la clase .is-filling, ver más abajo) para que no se vea un flash de la barra llena antes de que JS dispare la primera animación. */ .segmento-highlight-fill{ position: absolute; left: 0; bottom: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); } .segmento-highlight-fill.is-filling{ animation: segmentoFill 4s linear forwards; } @keyframes segmentoFill{ from{ width: 0%; } to{ width: 100%; } } /* Hover en desktop: pausa el auto-cycle (ver segmentos.js) — la barra de progreso tiene que pausarse junto con el timer de JS, si no quedan desincronizados (JS parado pero la animación de CSS siguiendo su propio reloj hasta completarse sola). */ .segmentos-grid:hover .segmento-highlight-fill.is-filling{ animation-play-state: paused; } @media (prefers-reduced-motion: reduce){ .segmento-highlight-fill.is-filling{ animation: none; width: 100%; } } /* Ahora clickeable: saltar directo a un segmento (ver segmentos.js) en vez de sólo poder mirar el auto-cycle pasivamente. */ .segmento-item{ position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 16px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 12px; } /* Ahora también operable por teclado (tabindex="0" + role="button" en el HTML, ver el keydown en segmentos.js): mismo criterio de foco que .navbar-toggle (ver navbar.css) — anillo prolijo sólo para quien navega con teclado, invisible con mouse/touch. */ .segmento-item:focus-visible{ outline: 2px solid var(--blue-light); outline-offset: 2px; } /* El ícono ya NO vive dentro de su propio círculo (aro+fondo aparte, como .que-hacemos-node): ahora es sólo el glyph suelto, directo sobre la tarjeta — el "encendido" que antes tenía el círculo (aro celeste, fondo tenue, glow) pasa a ser un efecto de LA TARJETA entera (ver .segmento-item.is-active más abajo), no de un elemento propio adentro. Sigue siendo más grande que el ícono normal de las tarjetas de "Qué hacemos"/"Por qué elegirnos" (32px vs 24-26px) porque acá no hay título aparte que le dé peso a la tarjeta — el ícono es el elemento principal. */ .segmento-icon{ display: flex; align-items: center; justify-content: center; color: var(--blue-light); transition: transform .25s var(--ease-smooth); } .segmento-icon svg{ width: 32px; height: 32px; } .segmento-label{ font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--text-dim); transition: color .25s ease; } /* Estado activo (ver segmentos.js — un solo item a la vez, ciclando solo cada 4s en TODOS los anchos): en esta variante el glow ya no lo pone el propio ítem (ver .segmento-highlight más arriba, es el pill compartido el que se desliza y lo da) — acá sólo queda el ícono agrandándose un poco y el label pasando de --text-dim a --text, para reforzar cuál es el segmento "actual" además del pill. */ .segmento-item.is-active .segmento-icon{ transform: scale(1.08); } .segmento-item.is-active .segmento-label{ color: var(--text); } /* Línea + nota de cierre, centrada, separando el grid de íconos del párrafo final (mismo tono que .solucion-copy-strong: la frase clave resaltada en vez de todo el párrafo con el mismo peso). */ .segmentos-note{ max-width: 640px; margin: 32px auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; font-size: 15px; line-height: 1.7; color: var(--text-dim); } .segmentos-note strong{ font-weight: 700; color: var(--blue-light); } @media (prefers-reduced-motion: reduce){ .segmentos-bg-layer{ transition: none; } } /* "Marcas que confían", fusionada acá adentro (antes era su propia
, con fondo oscuro liso propio — ver historial de este componente): comparte el fondo fotográfico de arriba (.segmentos-bg) en vez de tener uno propio, así se lee como el cierre de "a quién ayudamos" en vez de un mensaje nuevo. El panel es EXACTAMENTE el mismo vidrio que .segmentos-grid (mismo fondo/blur/bisel, hasta el mismo @keyframes segmentBarSheen) — la diferencia con copiar la clase tal cual es que .segmentos-grid es display:flex (pensado para que el pill reparta 6 columnas iguales), acá el contenido es un carril de ancho libre (.marcas-track, ver más abajo), por eso es una clase aparte con el mismo bloque de estilos en vez de reusar .segmentos-grid directo. */ /* Footer de la sección, no una tarjeta flotante: en vez de vivir adentro de .segmentos-inner (max-width:1440px + el padding de .segmentos), el panel es hermano de .segmentos-inner (ver el HTML) y se "escapa" del padding con márgenes negativos — mismo ancho que .segmentos left/right (64px en desktop, ver responsive.css para los otros anchos) pero en signo contrario, así el fondo de vidrio llega EXACTO hasta los 2 bordes de la sección. margin-bottom:0 + el padding-bottom que .segmentos ya no tiene (ver arriba) hacen que también toque el borde inferior real, sin dejar un hueco de fondo oscuro liso debajo. border-radius:0 a propósito: una tarjeta con esquinas redondeadas no se lee como "footer", se lee como un elemento más flotando adentro. */ .marcas-panel{ position: relative; margin: 40px -64px 0; padding: 22px 64px 30px; border-radius: 0; border-top: 1px solid rgba(255,255,255,0.08); background: linear-gradient(120deg, rgba(111,149,255,0.14) 0%, transparent 35%, transparent 65%, rgba(111,149,255,0.1) 100%), rgba(0,0,0,0.3); background-size: 250% 100%, 100% 100%; background-position: 0% 0%, 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; animation: segmentBarSheen 22s ease-in-out infinite alternate; animation-play-state: paused; } /* Mismo gate que .segmentos-grid: la sección entera ya tiene su propio IntersectionObserver (ver segmentos.js) que agrega/saca .is-bg-visible — el panel del marquee lo reusa en vez de tener un observer propio, porque ahora vive DENTRO de la misma sección, no aparte. */ .segmentos.is-bg-visible .marcas-panel{ animation-play-state: running; } @media (prefers-reduced-motion: reduce){ .marcas-panel{ animation: none; } } /* Título del panel: se agregó visible como fix de a11y (el marquee entero quedaba invisible para lectores de pantalla, ver historial) y después se pidió sacarlo de la vista porque no encajaba con el diseño — pasó a

en el HTML (ver shared.css), así que ya no necesita estilos visuales propios acá. */ /* Ventana del marquee: overflow:hidden recorta el carril (el doble de ancho que la ventana, ver .marcas-track) y el mask-image difumina los 2 bordes — así los logos no "aparecen"/"desaparecen" de golpe en el borde del panel, entran y salen con un fade suave. */ .marcas-marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } /* El carril tiene el DOBLE de los logos reales (ver el HTML: la lista se repite 2 veces seguidas dentro del mismo .marcas-track) — la animación sólo recorre translateX(0 → -50%), que es exactamente el ancho de la primera mitad; cuando llega ahí, la segunda mitad (idéntica a la primera) está exactamente donde arrancó la primera, así que el salto de vuelta a 0% es invisible y el loop se siente continuo en vez de "cortarse" y saltar al principio. */ .marcas-track{ display: flex; align-items: center; gap: 76px; width: max-content; animation: marcasScroll 48s linear infinite; animation-play-state: paused; } .segmentos.is-bg-visible .marcas-track{ animation-play-state: running; } /* Pausa también con el mouse encima: da tiempo a mirar un logo puntual sin que el track siga corriendo por debajo del cursor. */ .marcas-marquee:hover .marcas-track{ animation-play-state: paused; } @keyframes marcasScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .marcas-track{ animation: none; flex-wrap: wrap; justify-content: center; } } /* Logos reales (img/marcas/, ya blancos sobre transparente — limpiados de ruido y optimizados, ver comentario en el HTML). Cada uno con su propio ancho natural (flex:none + width:auto en la img), no un cajón parejo: quedan más como una tira de logos real, cada marca con su proporción propia, en vez de forzarlos todos al mismo rectángulo. Atenuados a 65% de opacidad en reposo y a 100% en hover — mismo lenguaje sutil que el resto del sitio (borde/glow en hover), en vez de un tratamiento nuevo. */ .marcas-logo{ flex: none; display: flex; align-items: center; height: 30px; opacity: 0.65; transition: opacity .25s ease; } .marcas-logo:hover{ opacity: 1; } .marcas-logo img{ height: 100%; width: auto; display: block; object-fit: contain; }