/* Cenas dos serviços de tecnologia: WhatsApp, sistemas e aplicativos. Composição final é o estado padrão. */
.service-visual.tech-visual{width:100%;margin:0}
.tech-stage{position:relative;height:clamp(380px,34vw,480px);font-family:var(--font);color:var(--white)}
.tech-phone{position:absolute;width:clamp(220px,19vw,268px);aspect-ratio:9/18.5;padding:10px;border-radius:30px;background:#1c1c1a;border:1px solid #3a3a36;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.tech-phone-bar{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid #2f2f2b}
.tech-phone-bar b{display:block;font-size:12px;font-weight:600}.tech-phone-bar small{font-size:10px;color:#9d9a92}
.tech-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:-.05em}
.tech-stage [style*="--d:"]{animation:tech-in .6s var(--motion-arrive) calc(var(--d)*.45s + .3s) both}
@keyframes tech-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* WhatsApp */
.tech-chat .tech-phone{left:4%;top:0}
.tech-thread{display:flex;flex-direction:column;gap:8px;padding:12px 6px}
.msg{max-width:84%;padding:8px 10px;border-radius:12px;font-size:11.5px;line-height:1.35}
.msg.in{align-self:flex-end;background:var(--orange);color:var(--ink);border-bottom-right-radius:4px}
.msg.out{align-self:flex-start;background:#2c2c29;border-bottom-left-radius:4px}
.msg-options{display:flex;flex-direction:column;gap:5px;align-self:flex-start;width:78%}
.msg-options span{padding:6px 9px;border:1px solid #47463f;border-radius:8px;font-size:10.5px;color:#e7e3da}
.msg-system{display:flex;align-items:center;gap:6px;align-self:center;padding:5px 10px;border-radius:99px;background:#24241f;color:#cfcbc2;font-size:10px}
.msg-system svg,.app-toast svg{width:12px;height:12px;color:var(--orange)}
.tech-flow{position:absolute;right:2%;top:16%;display:flex;flex-direction:column;align-items:center;gap:0;width:32%}
.flow-node{display:block;width:100%;padding:12px 14px;border:1px solid #47463f;border-radius:12px;background:#171715;font-size:12px;font-weight:600;text-align:center}
.flow-node.is-hub{border-color:var(--orange);color:var(--orange)}
.tech-flow i{display:block;width:1px;height:26px;background:linear-gradient(var(--orange),#47463f)}

/* Sistemas */
.tech-window{position:absolute;inset:0 0 6% 2%;border:1px solid #3a3a36;border-radius:14px;background:#171715;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.tech-window-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #2f2f2b}
.tech-window-bar i{width:8px;height:8px;border-radius:50%;background:#3a3a36}
.tech-window-bar span{margin-left:12px;padding:3px 12px;border-radius:99px;background:#24241f;font-size:10px;color:#9d9a92}
.tech-app{display:grid;grid-template-columns:28% 1fr;height:calc(100% - 37px)}
.tech-app aside{display:flex;flex-direction:column;gap:4px;padding:16px 12px;border-right:1px solid #2f2f2b}
.tech-logo{width:26px;height:26px;border-radius:7px;background:var(--orange);margin-bottom:12px}
.tech-app aside b{padding:7px 9px;border-radius:7px;font-size:11px;font-weight:500;color:#a9a59c}
.tech-app aside b.is-current{background:#26261f;color:var(--white)}
.tech-main{display:flex;flex-direction:column;gap:14px;padding:16px;min-width:0}
.tech-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tech-kpis>div{padding:10px;border:1px solid #2f2f2b;border-radius:10px}
.tech-kpis small{display:block;font-size:10px;color:#a9a59c;margin-bottom:10px}
.tech-kpis .bar{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--orange) var(--w),#2f2f2b var(--w))}
.tech-chart{display:flex;align-items:flex-end;gap:7px;height:22%;padding:0 4px;border-bottom:1px solid #2f2f2b}
.tech-chart span{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:#3a3a36}
.tech-chart span:nth-last-child(-n+2){background:var(--orange)}
.tech-table{display:flex;flex-direction:column}
.tech-row{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid #26261f;font-size:11px}
.pill{font-style:normal;font-size:10px;padding:3px 8px;border-radius:99px}
.pill.ok{background:rgba(255,100,24,.16);color:var(--orange)}
.pill.wait{background:#2c2c29;color:#cfcbc2}
.pill.new{border:1px solid #47463f;color:#cfcbc2}

/* Aplicativos */
.tech-phone-back{left:6%;top:4%;transform:rotate(-4deg)}
.tech-phone-front{left:42%;top:10%;transform:rotate(3deg)}
.app-screen{display:flex;flex-direction:column;gap:10px;height:100%;padding:12px 8px;border-radius:22px;background:#141412}
.app-top b{display:block;font-size:13px;letter-spacing:-.02em}.app-top small{font-size:10px;color:#9d9a92}
.app-card{padding:12px;border-radius:14px;background:#24241f}
.app-card.is-accent{background:var(--orange);color:var(--ink)}
.app-card small,.app-card span{display:block;font-size:10px}.app-card b{display:block;font-size:17px;letter-spacing:-.03em;margin:4px 0}
.app-list{display:flex;flex-direction:column;gap:6px}
.app-list span{padding:10px;border-radius:10px;background:#1f1f1c;font-size:11px}
.app-tabs{display:flex;justify-content:space-around;margin-top:auto;padding:10px 0 4px;border-top:1px solid #2a2a26}
.app-tabs i{width:16px;height:16px;border-radius:5px;background:#3a3a36}.app-tabs i.is-current{background:var(--orange)}
.app-field small{display:block;font-size:10px;color:#9d9a92;margin-bottom:4px}
.app-field span{display:block;height:28px;border-radius:8px;border:1px solid #33332e;background:#1b1b18}
.app-photo{display:grid;place-items:center;height:56px;border-radius:10px;border:1px dashed #47463f;font-size:10px;color:#a9a59c}
.app-button{display:grid;place-items:center;height:36px;margin-top:auto;border-radius:99px;background:var(--orange);color:var(--ink);font-size:11px;font-weight:600}
.app-toast{position:absolute;right:0;bottom:8%;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--paper);color:var(--ink);font-size:11px;font-weight:600;box-shadow:0 18px 30px -18px rgba(0,0,0,.7)}

.motion-paused .tech-stage [style*="--d:"]{animation:none}
@media(prefers-reduced-motion:reduce){.tech-stage [style*="--d:"]{animation:none}}
@media(max-width:820px){
 .tech-stage{height:440px;max-width:560px;margin-inline:auto}
}
@media(max-width:540px){
 .tech-stage{height:400px}
 .tech-phone{width:200px}
 .tech-chat .tech-phone{left:0}
 .tech-flow{width:36%;right:0;top:22%}
 .flow-node{padding:10px 6px;font-size:11px}
 .tech-app{grid-template-columns:1fr}.tech-app aside{display:none}
 .tech-phone-front{left:38%}
 .app-toast{right:0;bottom:2%;font-size:10px}
}