/* A connected web and app experience, balanced with the larger Services cards. */
.service-list #development{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:38px;min-height:420px}
.development-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.development-copy>p{max-width:430px}
.development-copy>ul{margin-top:6px;margin-bottom:30px}
.development-copy .text-link{margin-top:0}
.development-visual{--dev-surface:#fff;--dev-canvas:#f2f3f3;--dev-panel:#f2f3f3;--dev-border:#d4d7d7;--dev-skeleton:#d4d7d7;--dev-grid:#d9dddd;--dev-copy:#454747;--dev-selected:#ff7d3715;--dev-pill:#151718;--dev-pill-copy:#fff;margin:0;min-width:0;width:100%;max-width:600px;justify-self:center}
.development-visual svg{display:block;width:100%;height:auto;overflow:visible}
.dev-canvas{fill:var(--dev-canvas);stroke:var(--dev-border);stroke-width:1}
.dev-grid-line{fill:none;stroke:var(--dev-grid);stroke-width:.7;opacity:.45}
.dev-device{fill:var(--dev-surface);stroke:var(--dev-border);stroke-width:1.5;filter:drop-shadow(0 9px 10px #0000000d)}
.dev-divider,.dev-connections{fill:none;stroke:var(--dev-border);stroke-width:1.5}
.dev-connections{stroke-width:2}
.dev-signals{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-dasharray:22 460;stroke-linecap:round}
.dev-signals path{animation:dev-data-flow 6s linear infinite}
.dev-signals path+path{animation-delay:-3s;stroke-dasharray:12 90;animation-duration:3s}
.dev-chrome-dot,.dev-skeleton{fill:var(--dev-skeleton)}
.dev-panel,.dev-phone-screen{fill:var(--dev-panel)}
.dev-selected{fill:var(--dev-selected);stroke:#ff7d3740;stroke-width:1}
.dev-label{fill:var(--ink);font:600 21px Arial,Helvetica,sans-serif;letter-spacing:-.5px}
.dev-small-label{font-size:18px;font-weight:500}
.dev-mini-line{fill:none;stroke:var(--dev-copy);stroke-width:3;stroke-linecap:round;opacity:.45}
.dev-chart-grid{fill:none;stroke:var(--dev-border);stroke-width:.8}
.dev-bars rect{fill:var(--orange);transform-box:fill-box;transform-origin:center bottom;animation:dev-chart-breathe 5s ease-in-out infinite alternate}
.dev-bars rect:nth-child(2){animation-delay:-1s}.dev-bars rect:nth-child(3){animation-delay:-2s}.dev-bars rect:nth-child(4){animation-delay:-3s}.dev-bars rect:nth-child(5){animation-delay:-4s}
.dev-check{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dev-accent,.dev-live-dot{fill:var(--orange)}
.dev-live-dot{animation:dev-status-pulse 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dev-system-pill{fill:var(--dev-pill)}
.dev-system-label{fill:var(--dev-pill-copy);font:500 16px Arial,Helvetica,sans-serif;letter-spacing:-.3px}
html[lang=es] .dev-system-label{font-size:15px}
html[data-theme=night] .development-visual{--dev-surface:#242424;--dev-canvas:#111;--dev-panel:#191919;--dev-border:#484848;--dev-skeleton:#4b4b4b;--dev-grid:#454545;--dev-copy:#d4d4d4;--dev-selected:#ff7d371a;--dev-pill:#303030;--dev-pill-copy:#f0f0f0}
@keyframes dev-data-flow{from{stroke-dashoffset:482}to{stroke-dashoffset:0}}
@keyframes dev-chart-breathe{from{transform:scaleY(.8)}to{transform:scaleY(1)}}
@keyframes dev-status-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:1050px){.service-list #development{gap:30px;padding:30px}}
@media(max-width:900px){.service-list #development{grid-template-columns:minmax(0,1fr);gap:26px}.development-copy>p{max-width:570px}.development-visual{max-width:580px}.development-copy>ul{margin-bottom:24px}}
@media(max-width:760px){.service-list #development{padding:28px;gap:24px}.development-visual{width:calc(100% + 24px);max-width:none;margin:0 -12px}}
@media(prefers-reduced-motion:reduce){.development-visual *, .development-visual *::before,.development-visual *::after{animation:none!important}}
