.operations-system { margin: 2.5rem 0 3.5rem; padding: 2rem; overflow: hidden; border: 1px solid #235778; border-radius: 24px; color: #fff; background: radial-gradient(ellipse at 30% 50%, #104d72 0, transparent 65%), #00264a; }
.operations-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.operations-toolbar > span { color: #56c6f2; font-size: .65rem; letter-spacing: .16em; font-weight: 800; }
.operations-toolbar button { border: 1px solid #56c6f2; border-radius: 30px; padding: .65rem 1rem; color: #fff; background: transparent; font: inherit; font-size: .75rem; cursor: pointer; }
.operations-toolbar button:hover { background: #104d72; }
.operations-toolbar button:focus-visible { outline: 3px solid #00b7ff; outline-offset: 4px; }
.operations-flow { display: grid; grid-template-columns: 1.25fr .2fr 1fr; align-items: center; gap: 1.2rem; }
.operations-pieces { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.operations-piece { position: relative; padding: 1.6rem 1.2rem; min-height: 140px; background: #063354; border: 1px solid #56c6f2; border-radius: 16px; }
.operations-piece > span { display: block; color: #56c6f2; font-size: .58rem; letter-spacing: .08em; margin-bottom: .8rem; }
.operations-piece strong { font-size: clamp(.8rem, 1.2vw, 1.05rem); line-height: 1.4; }
.operations-piece i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #00b7ff; bottom: 15px; right: 15px; box-shadow: 0 0 16px #00b7ff; }
.operations-junction { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #56c6f2; border-radius: 10px; background: #00b7ff; color: #00264a; font-size: 1.6rem; }
.operations-bridge { position: relative; height: 3px; background: #235778; }
.operations-bridge span { display: block; height: 100%; background: #00b7ff; box-shadow: 0 0 16px #00b7ff; transform-origin: left; }
.operations-bridge b { position: absolute; right: -4px; top: -18px; color: #56c6f2; font-size: 1.6rem; }
.operations-output { padding: 1.8rem; border: 1px solid #56c6f2; border-radius: 20px; background: #002343; box-shadow: 0 0 35px #00b7ff22; }
.operations-status { display: flex; align-items: center; gap: .5rem; font-size: .65rem; color: #b6e6fa; }
.operations-status i { width: 7px; height: 7px; border-radius: 50%; background: #56c6f2; box-shadow: 0 0 12px #00b7ff; }
.operations-output h3 { margin: 1rem 0; color: #fff; font-size: clamp(1.5rem, 3vw, 2.8rem); line-height: 1.1; }
.operations-output h3 span { color: #56c6f2; }
.operations-results { display: flex; flex-wrap: wrap; gap: .5rem; }
.operations-results span { padding: .4rem .6rem; border: 1px solid #235778; border-radius: 6px; color: #d9f4ff; font-size: .65rem; }
.operations-caption { margin: 1.5rem 0 0; color: #b6e6fa; font-size: .8rem; }
.operations-system.is-playing .operations-piece { animation: piece-dock 1.4s cubic-bezier(.16,1,.3,1) both; }
.operations-piece:nth-child(1) { --x: -65px; --y: -35px; }.operations-piece:nth-child(2) { --x: 65px; --y: -35px; animation-delay: .35s !important; }.operations-piece:nth-child(3) { --x: -65px; --y: 35px; animation-delay: .7s !important; }.operations-piece:nth-child(4) { --x: 65px; --y: 35px; animation-delay: 1.05s !important; }
.operations-system.is-playing .operations-junction { animation: junction-on .6s 2s both; }
.operations-system.is-playing .operations-bridge span { animation: bridge-on .7s 2.3s both; }
.operations-system.is-playing .operations-output { animation: output-on 1s 2.8s both; }
.operations-system.is-playing .operations-results { animation: output-on .7s 3.7s both; }
@keyframes piece-dock { from { opacity: .15; transform: translate(var(--x),var(--y)) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes junction-on { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes bridge-on { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes output-on { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 800px) { .operations-flow { grid-template-columns: 1fr; gap: 1.5rem; }.operations-bridge { width: 3px; height: 35px; justify-self: center; }.operations-bridge span { transform-origin: top; }.operations-bridge b { rotate: 90deg; right: -11px; top: 12px; }.operations-system.is-playing .operations-bridge span { animation-name: bridge-down; } }
@keyframes bridge-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 540px) { .operations-system { padding: 1.1rem; }.operations-toolbar { align-items: start; }.operations-toolbar > span { max-width: 120px; line-height: 1.6; }.operations-toolbar button { font-size: .65rem; padding: .55rem .7rem; }.operations-piece { padding: 1.1rem .7rem; min-height: 130px; }.operations-piece > span { font-size: .5rem; }.operations-output { padding: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .operations-system.is-playing * { animation: none !important; }.operations-toolbar button { display: none; } }
.hero-assembly { margin: 0; padding: 1.5rem; width: 100%; min-width: 0; }
.hero-assembly .operations-flow { grid-template-columns: 1fr; gap: 1.2rem; }
.hero-assembly .operations-bridge { height: 24px; width: 3px; justify-self: center; }
.hero-assembly .operations-bridge span { transform-origin: top; }
.hero-assembly .operations-bridge b { rotate: 90deg; right: -11px; top: 2px; }
.hero-assembly.is-playing .operations-bridge span { animation-name: bridge-down; }
.hero-assembly .operations-output { padding: 1.2rem; }
.hero-assembly .operations-output h3 { font-size: 1.8rem; }
.hero-assembly .operations-output h3 br { display: none; }
.hero-assembly .operations-toolbar { margin-bottom: 1.2rem; }
@media (max-width: 540px) { .hero-assembly { padding: 1rem; } }
.hero-video-background { isolation: isolate; background: #00264a url('/assets/images/solucoes_que_funcionam.jpg') center / cover no-repeat; }
.hero-background-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.hero-video-background::before { inset: 0; z-index: 1; width: auto; height: auto; border-radius: 0; background: linear-gradient(90deg, rgba(0,27,53,.74) 0%, rgba(0,27,53,.64) 52%, rgba(0,27,53,.58) 100%); pointer-events: none; }
.hero-video-background .hero-grid-pattern { z-index: 1; pointer-events: none; }
.hero-video-background .hero-grid { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero-background-video { display: none; } }
.positioning-video-background { isolation: isolate; overflow: hidden; background: #00264a url('/assets/images/solucoes_que_funcionam.jpg') center / cover no-repeat; }
.positioning-background-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.positioning-video-background::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,27,53,.74) 0%, rgba(0,27,53,.64) 52%, rgba(0,27,53,.58) 100%); pointer-events: none; }
.positioning-video-background > .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .positioning-background-video { display: none; } }
.differentials-video-background { position: relative; isolation: isolate; overflow: hidden; background: #00264a url('/assets/images/diferenciais_softcase.jpg') center / cover no-repeat; }
.differentials-background-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.differentials-video-background::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,27,53,.74) 0%, rgba(0,27,53,.64) 52%, rgba(0,27,53,.58) 100%); pointer-events: none; }
.differentials-video-background > .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .differentials-background-video { display: none; } }
/* Seis módulos se encaixam ao entrar na área visível. */
body[data-page="home"].home-motion-ready .differentials .difference-grid { border-color: transparent; transition: border-color .5s 1.9s; }
body[data-page="home"].home-motion-ready .differentials .difference-grid > article.reveal { opacity: 1; filter: none; clip-path: inset(0 round 14px); transform: translate3d(var(--join-x),var(--join-y),0) scale(.88); border-color: #56c6f2; box-shadow: inset 0 0 0 1px #56c6f255; transition: transform 1.65s cubic-bezier(.16,1,.3,1) var(--join-delay), clip-path 1.65s ease var(--join-delay), box-shadow .7s ease 1.9s, border-color .7s ease 1.9s, background-color .3s; }
body[data-page="home"].home-motion-ready .differentials .difference-grid > article:nth-child(1) { --join-x: -95px; --join-y: -65px; --join-delay: 0s; }
body[data-page="home"].home-motion-ready .differentials .difference-grid > article:nth-child(2) { --join-x: 0px; --join-y: -95px; --join-delay: .12s; }
body[data-page="home"].home-motion-ready .differentials .difference-grid > article:nth-child(3) { --join-x: 95px; --join-y: -65px; --join-delay: .24s; }
body[data-page="home"].home-motion-ready .differentials .difference-grid > article:nth-child(4) { --join-x: -95px; --join-y: 65px; --join-delay: .36s; }
body[data-page="home"].home-motion-ready .differentials .difference-grid > article:nth-child(5) { --join-x: 0px; --join-y: 95px; --join-delay: .48s; }
body[data-page="home"].home-motion-ready .differentials .difference-grid > article:nth-child(6) { --join-x: 95px; --join-y: 65px; --join-delay: .6s; }
body[data-page="home"].home-motion-ready .differentials .difference-grid.is-boxes-visible { border-color: rgba(255,255,255,.2); }
body[data-page="home"].home-motion-ready .differentials .difference-grid.is-boxes-visible > article.reveal { transform: none; clip-path: inset(0 round 0); border-color: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px transparent; }
body[data-page="home"].home-motion-ready .differentials .difference-grid article > * { opacity: 1; transform: none; transition: none; }
.differentials .difference-grid.is-visible::after { animation: none; }
.differentials .difference-grid.is-boxes-visible::after { animation: difference-grid-connect 1.1s ease 2.1s both; }
@media (max-width: 800px) { body[data-page="home"].home-motion-ready .differentials .difference-grid > article:nth-child(odd) { --join-x: -35px; --join-y: -25px; } body[data-page="home"].home-motion-ready .differentials .difference-grid > article:nth-child(even) { --join-x: 35px; --join-y: 25px; } }
@media (max-width: 540px) { body[data-page="home"].home-motion-ready .differentials .difference-grid > article.reveal { --join-x: 0px; --join-y: 35px; transform: translateY(var(--join-y)) scale(.9); } body[data-page="home"].home-motion-ready .differentials .difference-grid.is-boxes-visible > article.reveal { transform: none; } }
@media (prefers-reduced-motion: reduce) { body[data-page="home"].home-motion-ready .differentials .difference-grid, body[data-page="home"].home-motion-ready .differentials .difference-grid > article.reveal { transition: none; transform: none; clip-path: none; } .differentials .difference-grid::after { display: none; } }
.operations-network { margin: .8rem 0; }
.operations-network svg { display: block; width: 100%; height: auto; overflow: visible; }
.network-wires path, .network-packets path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.network-wires path { stroke: #56c6f255; stroke-width: 1.5; }
.network-packets path { stroke: #56c6f2; stroke-width: 3; stroke-dasharray: 9 38; }
.network-node rect { fill: #063354; stroke: #56c6f2; stroke-width: 1; }
.network-node text { fill: #fff; font-family: var(--font); font-size: 11px; font-weight: 600; text-anchor: middle; }
.network-node-operation rect { fill: #005d88; stroke-width: 2; }
.operations-system.is-playing .network-packets path { animation: network-data-flow 1.8s linear 3.2s infinite; }
.operations-system.is-playing .network-node-operation rect { animation: network-operation-active 1.8s ease-in-out 3.2s infinite; }
@keyframes network-data-flow { to { stroke-dashoffset: -94; } }
@keyframes network-operation-active { 0%,100% { fill: #005d88; } 50% { fill: #0085b7; } }
@media (prefers-reduced-motion: reduce) { .operations-network * { animation: none !important; } }
.hero-assembly .operations-bridge { background: transparent; }
.hero-assembly .operations-bridge span { display: none; }