/* ========================================================================= SCALAR — landing page que-hacemos.css — sección "Qué hacemos" (fondo oscuro, timeline + tarjetas). 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 "Qué hacemos" ---------- Vuelve a fondo oscuro (como el hero), después de las 2 secciones claras de arriba — mismo criterio de contraste que separa al hero del resto: acá marca el cambio de vuelta. Reusa las variables --bg/--text/--blue-light pensadas para fondo oscuro (no --ink/--text-muted, esas son para las secciones claras de "El problema"/"La solución"). */ .que-hacemos{ position: relative; background: var(--bg); color: var(--text); padding: 88px 64px; /* overflow:hidden para contener el fondo animado (.que-hacemos::before más abajo): al ser varios círculos grandes con blur, sin esto sus bordes desenfocados sobresaldrían de la sección. */ overflow: hidden; } /* Fondo animado: 3 manchas de degradado radial (azules, muy tenues y blureadas) que se desplazan lento y en bucle. Es un pseudo-elemento propio (no reutiliza los círculos decorativos de "El problema", que son estáticos y de otro color) para poder tener 3 capas independientes con una sola propiedad "background-position" animada — CSS permite un valor de posición por cada capa de fondo (separados por coma, en el mismo orden que los "background" de arriba), así cada mancha recorre su propio camino sin necesitar 3 elementos ni 3 animaciones distintas. z-index:0, por detrás de .que-hacemos-inner (z-index:1 más abajo). */ .que-hacemos::before{ content: ''; position: absolute; inset: -10%; z-index: 0; 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); animation: queHacemosDrift 36s ease-in-out infinite alternate; /* Pausado por defecto; que-hacemos-scroll.js lo retoma sólo mientras la sección está en pantalla (clase .is-bg-visible en .que-hacemos). Un blur(70px) animando background-position en loop infinito es de las cosas más caras de repintar del sitio (mucho más que los blur(3-6px) del navbar/botones) — sin esto corría para siempre apenas se cargaba la página, sin importar si el usuario llegó a ver esta sección o no. */ animation-play-state: paused; pointer-events: none; } .que-hacemos.is-bg-visible::before{ animation-play-state: running; } @keyframes queHacemosDrift{ 0% { background-position: 10% 20%, 85% 30%, 40% 85%; } 50% { background-position: 30% 55%, 65% 60%, 65% 40%; } 100% { background-position: 15% 75%, 80% 15%, 30% 60%; } } @media (prefers-reduced-motion: reduce){ .que-hacemos::before{ animation: none; } } .que-hacemos-inner{ position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; } /* El contenedor (.que-hacemos-eyebrow) vive junto con .problema-eyebrow más arriba (mismo bloque), y la línea (.que-hacemos-eyebrow-line) junto con .hero-caption-line en la sección 4 (mismo ancho y color). Lo único propio de acá es el color del TEXTO: fondo oscuro, mismo criterio que .hero-caption-label — var(--blue-light) en vez de var(--blue), que es lo que usa .problema-eyebrow por estar sobre fondo claro. */ .que-hacemos-eyebrow span:last-child{ font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-light); } .que-hacemos-title{ font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; max-width: 760px; margin-bottom: 72px; } .que-hacemos-title .accent{ color: var(--blue-light); } /* Timeline: fila de 4 "nodos" (ícono + línea horizontal que los conecta) con un conector punteado que baja de cada uno a su tarjeta, justo debajo. .que-hacemos-item es display:contents en desktop (mismo patrón que .problema-cards-track): sus 3 hijos (nodo/conector/tarjeta) caen directo como celdas del grid de .que-hacemos-timeline, cada uno en su fila fija (grid-row) y en la columna que le toca según su posición (nth-child) — así arriba quedan los 4 íconos en fila, en el medio los 4 conectores, y abajo las 4 tarjetas, todo alineado en las mismas 4 columnas. En mobile (ver sección 9, Responsive) .que-hacemos-item deja de ser display:contents y cada uno se apila entero (ícono, conector, tarjeta) en una sola columna. */ .que-hacemos-timeline{ position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; column-gap: 32px; margin-bottom: 0; } /* Línea horizontal que conecta los 4 íconos entre sí: pseudo-elemento posicionado a la altura del centro vertical del círculo (mitad de sus 64px), por detrás de todo (z-index 0; los nodos van con z-index 1) — así se ve "atravesar" cada círculo (que es semitransparente) en vez de cortarse en cada uno, como en la referencia, y termina en un puntito sólido a cada punta (ver .que-hacemos-timeline-dot más abajo). left/right en 0 (no negativos): antes tenía un -24px que la hacía sobresalir más allá del límite de 1440px que respeta el resto del sitio (.que-hacemos-inner, igual que .hero-grid/.problema-inner/etc.) — un poquito más ancha que cualquier otra sección. Al quedar en 0, la línea termina exacto donde termina .que-hacemos-timeline, que ya coincide con ese mismo límite de 1440px (llena el 100% de .que-hacemos-inner). El "sobresalir" más allá de los íconos sigue notándose igual, porque el nodo queda centrado dentro de su columna del grid (bastante adentro del borde del contenedor), no por un offset extra artificial. */ .que-hacemos-timeline::before{ content: ''; position: absolute; top: 32px; left: 0; right: 0; height: 2px; background: var(--blue-light); opacity: 0.55; z-index: 0; } /* Puntito sólido en cada punta de la línea. Van como elementos propios dentro de .que-hacemos-timeline (no pseudo-elementos del nodo): antes estaban en .que-hacemos-node::before/::after, con "left" relativo al PROPIO nodo — pero el nodo está centrado dentro de su columna del grid, no pegado al borde del contenedor, así que no coincidía con la punta real de la línea. Al anclar el puntito al mismo contenedor que la línea (mismos left/right que .que-hacemos-timeline::before), quedan siempre exactamente en la punta visible de la línea, respetando el mismo límite de 1440px que el resto del sitio. */ .que-hacemos-timeline-dot{ position: absolute; top: 32px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-light); transform: translateY(-50%); z-index: 0; } .que-hacemos-timeline-dot--start{ left: 0; } .que-hacemos-timeline-dot--end{ right: 0; } .que-hacemos-item{ display: contents; } /* nth-of-type (no nth-child): los 2 puntitos de punta (.que-hacemos-timeline-dot, que son ) viven como hermanos ANTES de las 4 .que-hacemos-item (
) dentro de .que-hacemos-timeline. Con nth-child, esos 2 corrían el conteo y las tarjetas terminaban en la columna equivocada (todo el orden se veía salteado). nth-of-type sólo cuenta hermanos del mismo tag (div vs. span), así que ignora los puntitos y cada tarjeta cae en su columna real sin importar qué otros elementos haya alrededor. */ .que-hacemos-item:nth-of-type(1) > *{ grid-column: 1; } .que-hacemos-item:nth-of-type(2) > *{ grid-column: 2; } .que-hacemos-item:nth-of-type(3) > *{ grid-column: 3; } .que-hacemos-item:nth-of-type(4) > *{ grid-column: 4; } .que-hacemos-node{ grid-row: 1; position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; /* Vidrio (mismo lenguaje que .que-hacemos-card/.segmentos-grid: brillo diagonal + bisel), pero la CAPA DE ABAJO sigue siendo un var(--bg) sólido a propósito — border-radius:50% ya recorta el propio background a la forma del círculo (no hace falta overflow:hidden aparte), así que el brillo se ve arriba, pero nunca deja de tapar del todo la línea horizontal de la timeline que pasa por detrás (ver el porqué del fondo sólido más abajo, mismo motivo de siempre — sólo se le suma el brillo encima, no se le saca la base opaca). */ background: linear-gradient(120deg, rgba(255,255,255,0.14) 0%, transparent 35%, transparent 65%, rgba(111,149,255,0.12) 100%), var(--bg); background-size: 250% 100%, 100% 100%; background-position: 0% 0%, 0 0; /* Bisel de vidrio: highlight arriba, sombra abajo — mismo par inset que el resto de las tarjetas del sitio. */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.3); animation: queHacemosNodeSheen 24s ease-in-out infinite alternate; animation-play-state: paused; /* Mismo grosor (2px) que la línea horizontal de la timeline (.que-hacemos-timeline::before), para que el aro del círculo y la línea que lo atraviesa se sientan del mismo "peso" visual. */ border: 2px solid rgba(111,149,255,0.35); display: flex; align-items: center; justify-content: center; color: var(--blue-light); justify-self: center; transition: transform .25s var(--ease-smooth), border-color .25s ease, background .25s ease, box-shadow .25s ease; } .que-hacemos.is-bg-visible .que-hacemos-node{ animation-play-state: running; } /* Delay escalonado por nodo (mismo criterio que .que-hacemos-card::before): los 4 círculos no brillan todos juntos, el brillo los recorre de a uno. */ .que-hacemos-item:nth-of-type(2) .que-hacemos-node{ animation-delay: -6s; } .que-hacemos-item:nth-of-type(3) .que-hacemos-node{ animation-delay: -12s; } .que-hacemos-item:nth-of-type(4) .que-hacemos-node{ animation-delay: -18s; } @keyframes queHacemosNodeSheen{ 0% { background-position: 0% 0%, 0 0; } 100% { background-position: 100% 0%, 0 0; } } @media (prefers-reduced-motion: reduce){ .que-hacemos-node{ animation: none; } } .que-hacemos-node svg{ width: 26px; height: 26px; } /* Conector punteado del ícono a su tarjeta, con un puntito sólido al final (mismo lenguaje que los puntitos del carrusel de "El problema"). */ .que-hacemos-connector{ grid-row: 2; display: block; /* Antes era border-left:1px dashed, que deja el espaciado de guiones fijo por el navegador (no se puede controlar el largo/espacio entre guiones). Se pasa a un fondo con repeating-linear-gradient para poder definir a mano el largo de cada guión (8px) y el espacio entre ellos (10px), y de paso el ancho (2px) queda igual al resto de las líneas de la sección (línea horizontal de la timeline y aro del círculo). */ width: 2px; height: 52px; margin: 0 auto; background: repeating-linear-gradient( to bottom, rgba(111,149,255,0.5) 0px, rgba(111,149,255,0.5) 8px, transparent 8px, transparent 14px ); position: relative; justify-self: center; opacity: 0.8; transition: opacity .25s ease, transform .25s var(--ease-smooth); } .que-hacemos-connector::after{ content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-light); transform: translateX(-50%); transition: transform .25s var(--ease-smooth); } .que-hacemos-card{ grid-row: 3; position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 28px 24px; overflow: hidden; /* Vidrio esmerilado (mismo lenguaje que .segmentos-grid en segmentos.css): acá tiene sentido porque la tarjeta ya flota sobre el fondo animado con manchas de color blureadas (.que-hacemos::before) — el blur del propio vidrio hace que esas manchas se vean "a través" de la tarjeta en vez de sólo detrás, dándole profundidad real en vez de ser un panel opaco más. */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Bisel: borde superior claro / inferior oscuro, sugiere el grosor y la curva de una superficie de vidrio en vez de una tarjeta plana. */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.2); transition: transform .25s var(--ease-smooth), border-color .25s ease, background .25s ease, box-shadow .25s ease; } /* Brillo diagonal que recorre la tarjeta muy lento, en bucle: mismo truco que .segmentos-grid (@keyframes segmentBarSheen en segmentos.css), pero con delay distinto por tarjeta (nth-of-type) para que las 4 no brillen todas juntas a la vez — se ve más orgánico, como si la luz recorriera la fila de a una. Pausado por defecto; sólo corre mientras "Qué hacemos" está en pantalla (.is-bg-visible en .que-hacemos, mismo mecanismo que ya pausa el fondo animado de la sección — que-hacemos-scroll.js). */ .que-hacemos-card::before{ content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, rgba(255,255,255,0.09) 0%, transparent 30%, transparent 70%, rgba(111,149,255,0.08) 100%); background-size: 250% 100%; background-position: 0% 0%; pointer-events: none; animation: queHacemosCardSheen 22s ease-in-out infinite alternate; animation-play-state: paused; } /* El brillo va por z-index:0 (arriba del fondo/bisel de la tarjeta, pero abajo del texto): sin esto, al ser ::before position:absolute, pintaba por encima del título y el copy (que son estáticos, sin position propio) y los dejaba medio lavados. */ .que-hacemos-card > *{ position: relative; z-index: 1; } .que-hacemos-item:nth-of-type(2) .que-hacemos-card::before{ animation-delay: -5s; } .que-hacemos-item:nth-of-type(3) .que-hacemos-card::before{ animation-delay: -10s; } .que-hacemos-item:nth-of-type(4) .que-hacemos-card::before{ animation-delay: -15s; } .que-hacemos.is-bg-visible .que-hacemos-card::before{ animation-play-state: running; } @keyframes queHacemosCardSheen{ 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } } @media (prefers-reduced-motion: reduce){ .que-hacemos-card::before{ animation: none; } } .que-hacemos-card h3{ font-size: 17px; font-weight: 700; line-height: 1.3; } .que-hacemos-card-divider{ width: 22px; background: var(--blue-light); margin: 14px 0 14px; } .que-hacemos-card p{ font-size: 14.5px; line-height: 1.65; color: var(--text-dim); } /* Hover: ícono, conector y tarjeta reaccionan juntos, sin importar sobre cuál de los tres esté el mouse. Aunque .que-hacemos-item es display:contents (no genera caja propia), sigue recibiendo :hover cuando el puntero está sobre cualquiera de sus hijos renderizados — por eso alcanza con un solo ":hover" en el item para animar nodo/conector/ tarjeta a la vez, en vez de tener que repetir la regla en cada uno. */ /* Compartida con .que-hacemos-item.is-inview .que-hacemos-node (ver sección 9 (Responsive), spotlight por scroll en mobile — mismo efecto que este :hover, disparado por scroll en vez de mouse porque en mobile no hay hover real): mismo bloque exacto, por eso un solo selector combinado en vez de repetir las 4 propiedades en los dos lugares. */ .que-hacemos-item:hover .que-hacemos-node, .que-hacemos-item.is-inview .que-hacemos-node{ transform: scale(1.06); border-color: var(--blue-light); /* OJO: "rgba(111,149,255,0.14)" solo (semitransparente) volvía a dejar ver la línea horizontal de fondo a través del círculo en hover — lo mismo que ya habíamos tapado con el fondo sólido de base. Se superpone ese mismo tinte azul sobre var(--bg) opaco (en vez de reemplazarlo) para que se note el tinte pero el círculo siga sin dejar pasar nada de atrás. */ background: linear-gradient(rgba(111,149,255,0.16), rgba(111,149,255,0.16)), var(--bg); /* El glow tiene que ir HACIA ADENTRO del círculo (inset), no hacia afuera: cualquier resplandor que salga del borde inferior del nodo cae directo sobre el primer guión del conector (que arranca pegado al círculo, sin espacio) y lo tapa/difumina, se vea como aro duro o blureado. Con inset el brillo queda contenido adentro del círculo y no toca nada de lo que hay debajo. */ box-shadow: inset 0 0 12px rgba(111,149,255,0.45); } /* La tarjeta sube 6px en hover (translateY más abajo); el conector tiene que subir esos mismos 6px con ella para que el puntito de la punta siga tocando el borde superior de la tarjeta en vez de quedar "flotando" con un huequito en el medio. */ .que-hacemos-item:hover .que-hacemos-connector{ opacity: 1; transform: translateY(-6px); } .que-hacemos-item:hover .que-hacemos-connector::after{ transform: translateX(-50%) scale(1.25); } .que-hacemos-item:hover .que-hacemos-card{ transform: translateY(-6px); border-color: rgba(111,149,255,0.4); background: rgba(255,255,255,0.05); }