/* ============================================================ Dominant Tecnologia — style.css Conceito: "Placa-mãe viva" (circuito + tigre) Variáveis de cor herdam do :root inline no . ============================================================ */ /* ---------- Base tipográfica ---------- */ body{font-weight:300} strong{font-weight:600} p{color:var(--texto-suave)} ::selection{background:var(--eletrico);color:var(--navy)} .eyebrow,.tag{ font-family:'JetBrains Mono',monospace;font-weight:500; font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; color:var(--eletrico);display:inline-block; } .tag{margin-bottom:18px} /* ---------- Botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:'Poppins',sans-serif;font-weight:500;font-size:.95rem; padding:14px 26px;border-radius:var(--r-pill);border:1.5px solid transparent; cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s; white-space:nowrap; } .btn--sm{padding:10px 20px;font-size:.86rem} .btn--primary{background:var(--eletrico);color:var(--navy);font-weight:600} .btn--primary:hover{transform:translateY(-2px);box-shadow:var(--glow)} .btn--ghost{border-color:var(--linha);color:var(--texto)} .btn--ghost:hover{border-color:var(--eletrico);color:var(--eletrico);transform:translateY(-2px)} .btn--ghost-light{border-color:rgba(255,255,255,.4);color:#fff} .btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)} /* ---------- Navbar ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:100; padding:18px 0;transition:background .3s,padding .3s,box-shadow .3s;border-bottom:1px solid transparent} .nav.is-scrolled{background:rgba(6,19,40,.85);backdrop-filter:blur(12px); padding:10px 0;border-bottom-color:var(--linha);box-shadow:0 8px 32px rgba(6,19,40,.5)} .nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px} .nav__logo img{height:38px;width:auto} .nav__menu{display:flex;align-items:center;gap:30px} .nav__link{font-size:.95rem;color:var(--texto-suave);position:relative;transition:color .2s} .nav__link::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--eletrico);transition:width .25s var(--ease)} .nav__link:hover{color:var(--texto)} .nav__link:hover::after{width:100%} .nav__cta{margin-left:6px} .nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .nav__burger span{width:26px;height:2px;background:var(--texto);border-radius:2px;transition:transform .3s,opacity .3s} .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Circuito (signature element) ---------- */ .circuit{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9} .circuit svg{width:100%;height:100%} .circuit--hero{inset:0} .circuit--band{opacity:.6} .trace{stroke-dasharray:6 0;opacity:.5} .node{filter:drop-shadow(0 0 6px var(--eletrico));opacity:0;transform-box:fill-box;transform-origin:center} .node.on{animation:nodePulse 2.4s var(--ease) infinite} @keyframes nodePulse{ 0%{opacity:.25;r:4px} 50%{opacity:1;r:6px} 100%{opacity:.25;r:4px} } /* pulso viajante sobre os traços */ .trace.flow{stroke:var(--eletrico);stroke-dasharray:60 600;stroke-dashoffset:660;animation:flow 3.2s linear infinite;opacity:.9;filter:drop-shadow(0 0 4px var(--eletrico))} @keyframes flow{to{stroke-dashoffset:0}} /* ---------- Hero ---------- */ .hero__copy{position:relative;z-index:2} .eyebrow{margin-bottom:20px} .hero__title{margin-bottom:22px} .hero__sub{font-size:1.12rem;max-width:33em;margin-bottom:32px} .hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px} .hero__chips{display:flex;gap:10px;flex-wrap:wrap;list-style:none} .hero__chips li{font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--texto-suave); border:1px solid var(--linha);border-radius:var(--r-pill);padding:6px 14px} .hero__visual{position:relative;z-index:2;display:flex;justify-content:center} .tiger-stage{position:relative;width:min(440px,80vw);aspect-ratio:1} .tiger{width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(41,171,242,.45));position:relative;z-index:2} .tiger-glow{position:absolute;inset:8% ;border-radius:50%;z-index:1; background:radial-gradient(circle,rgba(41,171,242,.35),transparent 62%);filter:blur(20px); animation:breathe 5s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.55;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}} .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2; width:26px;height:42px;border:2px solid var(--linha);border-radius:14px;display:flex;justify-content:center;padding-top:7px} .scroll-hint span{width:4px;height:8px;background:var(--eletrico);border-radius:2px;animation:scrolldot 1.6s var(--ease) infinite} @keyframes scrolldot{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}80%{opacity:0;transform:translateY(10px)}} /* ---------- Seções genéricas ---------- */ .section{position:relative;padding:96px 0;z-index:1} .section--alt{background:var(--claro-bg);color:var(--claro-texto)} .section--alt p{color:#42566f} .section--alt .section__title{color:var(--claro-texto)} /* contraste AA: em fundo claro, tags/labels usam o royal escuro (não o ciano) */ .section--alt .tag,.section--alt .eyebrow{color:var(--royal)} .section--alt .card__meta,.section--alt .quote figcaption span,.section--alt .quotes__note{color:#566b87} .section--alt .step__n{color:var(--royal)} .section--alt .step:not(:last-child)::after{color:var(--royal)} .section__head{max-width:760px;margin-bottom:54px} .section__title{font-size:clamp(1.7rem,3.4vw,2.6rem)} /* Problema */ .prob{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start} .prob__lead{font-size:1.18rem;color:var(--texto);line-height:1.7} .prob__list{list-style:none;display:flex;flex-direction:column;gap:14px} .prob__list li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px; background:var(--surface);border:1px solid var(--linha);border-radius:var(--r-card);color:var(--texto)} .prob__list i{color:var(--eletrico);font-style:normal;font-family:'JetBrains Mono',monospace} /* Cards de serviço */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card{position:relative;background:#fff;border:1px solid #e2e9f4;border-radius:var(--r-card); padding:34px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .section--alt .card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(8,31,62,.12);border-color:var(--eletrico)} .card--feature{background:linear-gradient(160deg,var(--navy),var(--royal));border:0;color:#fff} .card--feature .card__text{color:rgba(234,241,251,.85)} .card--feature .card__meta{color:var(--eletrico)} .card__badge{position:absolute;top:18px;right:18px;font-family:'JetBrains Mono',monospace;font-size:.66rem; letter-spacing:.1em;text-transform:uppercase;background:var(--eletrico);color:var(--navy);padding:5px 10px;border-radius:var(--r-pill);font-weight:500} .card__icon{font-size:1.7rem;width:54px;height:54px;display:flex;align-items:center;justify-content:center; border-radius:12px;background:rgba(41,171,242,.12);color:var(--eletrico);margin-bottom:20px;font-family:'JetBrains Mono',monospace} .card--feature .card__icon{background:rgba(255,255,255,.14);color:#fff} .card__title{font-size:1.22rem;margin-bottom:12px} .card__title span{font-weight:400;color:inherit;opacity:.7;font-size:.92em} .card__text{font-size:.96rem;margin-bottom:18px} .card__meta{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.04em;color:#7d93b3;display:block} /* Industrial */ .industrial{background:linear-gradient(180deg,var(--bg),#04101f);overflow:hidden} .industrial__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center} .industrial__copy p{font-size:1.05rem;margin-bottom:22px;color:var(--texto-suave)} .industrial__note{font-size:.95rem;color:var(--texto)} .industrial__visual{display:flex;justify-content:center} .industrial__visual img{width:min(360px,70vw);filter:drop-shadow(0 20px 60px rgba(41,171,242,.3))} .ticks{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:24px} .ticks li{position:relative;padding-left:30px;color:var(--texto)} .ticks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%; border:2px solid var(--eletrico);box-shadow:0 0 10px rgba(41,171,242,.6)} /* Como funciona — steps */ .steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s} .step{position:relative;padding:30px 24px;background:#fff;border:1px solid #e2e9f4;border-radius:var(--r-card)} .step__n{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:500;color:var(--eletrico)} .step h3{font-size:1.12rem;margin:10px 0 8px;color:var(--claro-texto)} .step p{font-size:.92rem} .step:not(:last-child)::after{content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%); color:var(--eletrico);font-weight:700;z-index:3} /* Diferenciais */ .diffs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .diff{padding:30px 28px;background:var(--surface);border:1px solid var(--linha);border-radius:var(--r-card); transition:transform .3s var(--ease),border-color .3s} .diff:hover{transform:translateY(-4px);border-color:var(--eletrico)} .diff h3{font-size:1.18rem;margin-bottom:10px;color:var(--texto)} /* Cases / quotes */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .quote{background:#fff;border:1px solid #e2e9f4;border-radius:var(--r-card);padding:30px 26px; display:flex;flex-direction:column;gap:20px;border-top:3px solid var(--eletrico)} .quote blockquote{font-size:1.02rem;line-height:1.6;color:#33425c;font-style:italic} .quote figcaption{display:flex;flex-direction:column;gap:2px} .quote figcaption strong{color:var(--navy)} .quote figcaption span{font-family:'JetBrains Mono',monospace;font-size:.76rem;color:#7d93b3} .quotes__note{text-align:center;margin-top:24px;font-size:.85rem;color:#7d93b3} /* Sobre */ .about__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:54px;align-items:center} .about__copy p{font-size:1.05rem;margin-bottom:18px;color:var(--texto-suave)} .about__facts{list-style:none;display:flex;flex-direction:column;gap:16px} .about__facts li{padding:22px 24px;background:var(--surface);border:1px solid var(--linha); border-left:3px solid var(--eletrico);border-radius:var(--r-card)} .about__facts strong{display:block;font-size:1.5rem;color:var(--texto);font-weight:600} .about__facts span{font-size:.9rem;color:var(--texto-suave)} /* CTA final */ .cta{position:relative;padding:110px 0;background:linear-gradient(135deg,var(--royal),var(--navy));overflow:hidden;text-align:center} .cta__inner{position:relative;z-index:2;max-width:760px;margin:0 auto} .cta__title{font-size:clamp(1.8rem,3.6vw,2.7rem);color:#fff;margin-bottom:18px} .cta__sub{color:rgba(255,255,255,.85);font-size:1.1rem;margin-bottom:34px} .cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px} /* Form */ .leadform{text-align:left;background:rgba(6,19,40,.35);border:1px solid rgba(255,255,255,.16); border-radius:16px;padding:30px;backdrop-filter:blur(6px)} .leadform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .field span{font-size:.82rem;color:rgba(255,255,255,.8);font-weight:500} .field input,.field textarea{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06);color:#fff;font-family:'Poppins',sans-serif;font-size:.95rem;transition:border-color .2s} .field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.45)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--eletrico);box-shadow:0 0 0 3px rgba(41,171,242,.25)} .leadform__btn{width:100%;margin-top:6px} .leadform__hint{font-size:.76rem;color:rgba(255,255,255,.55);margin-top:12px} /* Footer */ .footer{background:#04101f;border-top:1px solid var(--linha);padding:64px 0 28px} .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:40px} .footer__brand img{height:40px;width:auto;margin-bottom:16px} .footer__brand p{max-width:30em;font-size:.95rem} .footer__col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--texto);margin-bottom:16px;font-family:'JetBrains Mono',monospace;font-weight:500} .footer__col a{display:block;color:var(--texto-suave);font-size:.92rem;margin-bottom:10px;transition:color .2s} .footer__col a:hover{color:var(--eletrico)} .footer__addr{font-size:.92rem;color:var(--texto-suave)} .footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px; padding-top:24px;border-top:1px solid var(--linha);font-size:.84rem;color:#6d83a3;flex-wrap:wrap} .footer__by strong{color:var(--eletrico)} /* WhatsApp flutuante */ .wpp-float{position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%; background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 10px 30px rgba(37,211,102,.45);transition:transform .25s var(--ease);animation:wppIn .4s var(--ease) .8s both} .wpp-float:hover{transform:scale(1.08)} .wpp-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:wppRing 2.4s ease-out infinite} @keyframes wppRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}} @keyframes wppIn{from{transform:scale(0)}to{transform:scale(1)}} /* ---------- Reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-visible{opacity:1;transform:none} /* =================== RESPONSIVO =================== */ @media (max-width:1024px){ .hero__grid{grid-template-columns:1fr 1fr;gap:32px} .cards,.quotes{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr;gap:28px} .step:nth-child(2)::after{display:none} } @media (max-width:768px){ .nav__menu{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:#071a33; flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:40px; transform:translateX(100%);transition:transform .35s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.4)} .nav__menu.is-open{transform:translateX(0)} .nav__burger{display:flex;z-index:101} .nav__cta{margin-left:0} .hero{padding-top:108px} .hero__grid{grid-template-columns:1fr} .hero__visual{order:-1} .tiger-stage{width:min(300px,68vw)} .prob,.cards,.diffs,.quotes,.steps,.industrial__grid,.about__grid,.footer__grid{grid-template-columns:1fr} .industrial__visual{order:-1} .step:not(:last-child)::after{display:none} .leadform__row{grid-template-columns:1fr} .section{padding:72px 0} .footer__bottom{justify-content:flex-start} .scroll-hint{display:none} } @media (max-width:400px){ .hero__cta,.cta__actions{flex-direction:column} .hero__cta .btn,.cta__actions .btn{width:100%} } /* =================== ACESSIBILIDADE / MOTION =================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none} .node{opacity:.7} } :focus-visible{outline:3px solid var(--eletrico);outline-offset:3px;border-radius:4px} /* ============================================================ PCP + MES — demo interativa (esteira de produção) Portado do site da Automatic, vestido na identidade Dominant (navy + azul-elétrico, Poppins + JetBrains Mono). ============================================================ */ .twin{background:linear-gradient(180deg,rgba(30,64,216,.06),transparent 42%)} .twin__head{max-width:760px;margin-bottom:40px} .twin .hl{color:var(--eletrico)} .twin__lede{color:var(--texto-suave);font-size:1.05rem;margin-top:18px;max-width:62ch} .twin__stage{border:1px solid var(--linha);border-radius:var(--r-card);background:linear-gradient(180deg,var(--surface),#0A2140);overflow:hidden;box-shadow:0 30px 80px -34px rgba(6,19,40,.7)} .twin__bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--linha);background:rgba(255,255,255,.02)} .twin__bar .hud__dot{width:9px;height:9px;border-radius:50%;background:var(--eletrico);box-shadow:0 0 0 0 rgba(41,171,242,.6);animation:tw-pulse 2s infinite;flex:none} .twin__bar .hud__title{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.14em;color:var(--texto-suave)} .twin__status{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.12em;color:var(--eletrico);border:1px solid rgba(41,171,242,.4);padding:2px 9px;border-radius:6px;white-space:nowrap;transition:color .3s,border-color .3s} .twin__status[data-mode="stop"]{color:var(--texto-suave);border-color:var(--linha)} .twin__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;background:var(--linha)} .twin__machine,.twin__data{min-width:0} .twin__machine{background:radial-gradient(ellipse 80% 90% at 40% 30%,rgba(41,171,242,.08),transparent 70%),var(--surface);padding:22px 20px 16px;margin:0;display:flex;flex-direction:column;justify-content:center} .twin__svg{width:100%;height:auto;display:block} /* faixa "IA analisando a produção" — carrossel de mensagens pré-prontas */ .twin__ai{margin-top:14px;display:flex;flex-direction:column;gap:9px} .twin__ai-badge{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--eletrico)} .twin__ai-dot{width:7px;height:7px;border-radius:50%;background:var(--eletrico);box-shadow:0 0 0 0 rgba(41,171,242,.6);animation:tw-pulse 1.8s infinite} .twin__ai-track{position:relative;min-height:2.7em} .twin__ai-msg{position:absolute;inset:0;margin:0;font-family:'JetBrains Mono',monospace;font-size:.72rem;line-height:1.45;color:var(--texto-suave);opacity:0;transform:translateY(6px);animation:twAiCycle 13.5s infinite} .twin__ai-msg:nth-child(1){animation-delay:0s} .twin__ai-msg:nth-child(2){animation-delay:4.5s} .twin__ai-msg:nth-child(3){animation-delay:9s} @keyframes twAiCycle{0%{opacity:0;transform:translateY(6px)}4%{opacity:1;transform:none}29%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-6px)}} @keyframes tw-pulse{0%{box-shadow:0 0 0 0 rgba(41,171,242,.55)}70%{box-shadow:0 0 0 9px rgba(41,171,242,0)}100%{box-shadow:0 0 0 0 rgba(41,171,242,0)}} .twin__data{background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:18px} .twin__chart{border:1px solid var(--linha);border-radius:8px;padding:14px 14px 10px;background:linear-gradient(180deg,rgba(6,19,40,.55),transparent)} .twin__chart-head{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px} .twin__legend{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.04em;color:var(--texto-suave)} .tw-dot{width:8px;height:8px;border-radius:50%;flex:none} .tw-dot--amber{background:var(--eletrico)} .tw-dot--teal{background:#6E8FC7} .twin__plot{width:100%;height:150px;display:block;overflow:visible} .tw-plot-grid line{stroke:var(--linha);stroke-width:1;stroke-dasharray:3 5} .tw-plot-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .tw-plot-line--press{stroke:var(--eletrico);filter:drop-shadow(0 0 3px rgba(41,171,242,.5))} .tw-plot-line--cad{stroke:#6E8FC7;filter:drop-shadow(0 0 3px rgba(110,143,199,.4))} .tw-plot-dot{stroke:var(--bg);stroke-width:1.5} .tw-plot-dot--press{fill:var(--eletrico)} .tw-plot-dot--cad{fill:#6E8FC7} .twin__axis{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.06em;color:var(--texto-suave);margin-top:6px} .twin__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:8px;overflow:hidden} .twin__kpi{background:var(--surface);padding:14px 12px;display:flex;flex-direction:column;gap:3px} .twin__kpi-val{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.5rem;color:var(--texto);line-height:1;font-variant-numeric:tabular-nums} .twin__kpi--accent .twin__kpi-val{color:var(--eletrico)} .twin__kpi-lbl{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.04em;color:var(--texto-suave)} /* twin SVG — esteira de produção (metal em tons de navy) */ .tw-floor{stroke:var(--linha);stroke-width:2;opacity:.5} .tw-leg{fill:#0E2A4C;stroke:var(--linha);stroke-width:1} .tw-belt-band{fill:#0A1F3A;stroke:var(--linha);stroke-width:1.5} .tw-belt-dash{stroke:#1B3A66;stroke-width:30;stroke-dasharray:8 30;opacity:.55} .tw-pulley{fill:#163A63;stroke:var(--linha);stroke-width:1.5} .tw-idler{fill:#0E2A4C;stroke:var(--linha);stroke-width:1} .tw-spoke{stroke:var(--linha);stroke-width:1.5;opacity:.85} .tw-chute{fill:rgba(33,64,127,.35);stroke:var(--linha);stroke-width:1.5} .tw-chute-neck{fill:#0E2A4C} .tw-post{fill:#0E2A4C;stroke:var(--linha);stroke-width:1} .tw-beam{fill:#163A63;stroke:var(--linha);stroke-width:1} .tw-ram-housing{fill:#0A1F3A;stroke:var(--linha);stroke-width:1} .tw-ram{fill:var(--eletrico)} .tw-blade2{fill:var(--eletrico)} .tw-ok{fill:var(--eletrico);opacity:.18;transition:opacity .1s,filter .1s} .tw-ok.blink{opacity:1;filter:drop-shadow(0 0 6px rgba(41,171,242,.85))} .tw-piece{fill:#8FA6C6;stroke:var(--bg);stroke-width:.75;transition:height .12s ease,y .12s ease,fill .2s} .tw-piece.pressed{fill:#3E6FA5} .tw-labels text{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.08em;fill:var(--texto-suave);text-anchor:middle} /* animações contínuas — belt + rolos (só quando rodando) */ .tw-roll{transform-box:fill-box;transform-origin:center;animation:tw-rot linear infinite;animation-duration:var(--tw-roll-dur,1.6s);animation-play-state:paused} @keyframes tw-rot{to{transform:rotate(360deg)}} .tw-belt-dash{animation:tw-belt linear infinite;animation-duration:var(--tw-belt-dur,1.2s);animation-play-state:paused} @keyframes tw-belt{to{stroke-dashoffset:-38}} .twin__stage.is-running .tw-roll, .twin__stage.is-running .tw-belt-dash{animation-play-state:running} /* controles interativos */ .twin__controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 18px;border-top:1px solid var(--linha)} .tw-btn{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.02em;color:var(--texto);background:var(--surface);border:1px solid var(--linha);border-radius:var(--r-pill);padding:9px 16px;cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .12s} .tw-btn:hover{border-color:var(--eletrico);color:var(--eletrico)} .tw-btn:active{transform:translateY(1px)} .tw-btn__icon{font-size:.9em;line-height:1} .tw-btn--primary{background:var(--eletrico);color:var(--navy);border-color:var(--eletrico);font-weight:600} .tw-btn--primary:hover{color:var(--navy);filter:brightness(1.08)} .tw-btn--primary.is-on{background:transparent;color:var(--eletrico);border-color:rgba(41,171,242,.5)} .tw-btn--primary.is-on:hover{color:var(--eletrico);filter:none} .twin__hint{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--texto-suave);margin-left:auto} @media (max-width:1024px){ .twin__grid{grid-template-columns:1fr} } @media (max-width:600px){ .twin__kpis{grid-template-columns:repeat(2,1fr)} .twin__kpi-val{font-size:1.3rem} .twin__machine{padding:16px 12px 12px} .twin__hint{display:none} } /* A demo é interativa e pausável: mantém o movimento mesmo com "reduzir movimento" ligado (o botão Pausar dá o controle ao usuário — WCAG 2.2.2). Sobrescreve o reset global animation:none!important da Dominant. */ @media (prefers-reduced-motion:reduce){ .twin__stage.is-running .tw-roll{animation:tw-rot linear infinite var(--tw-roll-dur,1.6s)!important;animation-play-state:running!important} .twin__stage.is-running .tw-belt-dash{animation:tw-belt linear infinite var(--tw-belt-dur,1.2s)!important;animation-play-state:running!important} .twin__ai-msg:nth-child(1){animation:twAiCycle 13.5s 0s infinite!important} .twin__ai-msg:nth-child(2){animation:twAiCycle 13.5s 4.5s infinite!important} .twin__ai-msg:nth-child(3){animation:twAiCycle 13.5s 9s infinite!important} .twin__ai-dot{animation:tw-pulse 1.8s infinite!important} .twin__bar .hud__dot{animation:tw-pulse 2s infinite!important} .tw-ok,.tw-piece{transition:none!important} }