/* Vitrine interativa: 3 comportamentos distintos, 100% locais e fictícios */
.case-demo{background:#e7ecf6;color:#111b24;padding:90px 0 110px;border-top:3px solid #191b22}
.demo-head{display:grid;grid-template-columns:1fr 1fr;gap:7vw;margin-bottom:33px;align-items:end}
.demo-head h2{font:400 clamp(31px,3.6vw,55px)/1.08 "Archivo Black",sans-serif;letter-spacing:-.06em;margin:12px 0}
.demo-head p{font:400 15px/1.7 "IBM Plex Sans",sans-serif;color:#3f4d5d;margin:0}
.demo-label{font:600 10px "IBM Plex Mono",monospace;color:#b3442b;letter-spacing:.13em}
.demo-rack{display:grid;grid-template-columns:.85fr 1.15fr;background:#fffefa;border:2px solid #191d22;box-shadow:9px 9px 0 #174fca;min-height:390px}
.demo-controls{padding:34px 32px;background:#f9f6ec;border-right:1px solid #9aa6bb;display:flex;flex-direction:column;gap:12px}
.demo-controls h3{font:400 25px/1.15 "Archivo Black",sans-serif;letter-spacing:-.05em;margin:8px 0 16px}
.demo-action{border:1px solid #172023;background:#fff;text-align:left;padding:17px;display:flex;gap:16px;align-items:center;justify-content:space-between;font:600 12px "IBM Plex Mono",monospace;color:#152022;transition:background .2s,transform .2s}
.demo-action:hover{background:#f1c32f;transform:translateX(3px)}
.demo-action:disabled{opacity:.45;cursor:not-allowed;transform:none}
.demo-action:disabled:hover{background:white}
.demo-action.primary{background:#174fca;color:white}
.demo-action.primary:hover{background:#b74428}
.demo-action span:first-child{color:#b23b26;font-weight:700}
.demo-action.primary span:first-child{color:#f1c32f}
.demo-action small{font:400 11px "IBM Plex Mono",monospace}
.demo-output{padding:38px;position:relative;overflow:hidden}
.demo-output:before{content:"";position:absolute;pointer-events:none;right:20px;top:20px;width:140px;height:140px;background:linear-gradient(90deg,transparent 49%,#c7d1e7 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#c7d1e7 50%,transparent 51%);background-size:24px 24px;opacity:.2}
.demo-heading{display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid #111d28;padding-bottom:14px;font:600 10px "IBM Plex Mono",monospace;letter-spacing:.08em}
.demo-heading em{color:#b74428;font-style:normal}
.demo-big{font:400 clamp(26px,3vw,43px)/1.2 "Archivo Black",sans-serif;letter-spacing:-.05em;margin:43px 0 16px;min-height:68px;max-width:540px}
.demo-comment{font:400 15px/1.7 "IBM Plex Sans",sans-serif;color:#425265;max-width:510px;min-height:76px}
.demo-log{font:500 11px/1.7 "IBM Plex Mono",monospace;border:1px solid #bac7d3;padding:20px;margin-top:22px;background:#f1f5f9}
.demo-log strong{display:block;color:#b3412a;margin-bottom:7px}
.demo-note{margin-top:25px;font:400 11px/1.6 "IBM Plex Mono",monospace;color:#607282}
.demo-select{display:flex;flex-direction:column;gap:8px;font:700 11px "IBM Plex Mono",monospace}
.demo-select select{border:1px solid #1f2831;padding:15px 13px;background:#fff;font:500 13px "IBM Plex Sans",sans-serif;width:100%}
.demo-check{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #152029;padding:14px;cursor:pointer;font-size:13px;line-height:1.6}
.demo-check input{accent-color:#174fca;margin-top:4px;width:17px;height:17px;flex-shrink:0}
.demo-feedback{font:500 12px/1.6 "IBM Plex Mono",monospace;color:#174fca;margin-top:10px}
.demo-feedback[data-error="true"]{color:#b13e26}
.demo-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:27px}
.demo-metrics>div{border-top:2px solid #174fca;padding-top:12px}
.demo-metrics strong{display:block;font:400 28px "Archivo Black",sans-serif}
.demo-metrics span{font:10px "IBM Plex Mono",monospace;color:#667381}
.demo-status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#bd4b37;margin-right:9px}
.demo-status-dot.connected{background:#277c50}
@media(max-width:900px){.demo-head,.demo-rack{grid-template-columns:1fr}.demo-controls{border-right:0;border-bottom:1px solid #9aa6bb}.demo-rack{min-height:0}.demo-output{padding:30px}}
@media(max-width:550px){.case-demo{padding:65px 0 78px}.demo-head{gap:12px}.demo-head h2{font-size:35px}.demo-controls,.demo-output{padding:22px}.demo-big{font-size:29px;margin-top:26px}.demo-action{padding:15px}}
@media(prefers-reduced-motion:reduce){.demo-action:hover{transform:none}}
.demo-action.primary span:first-child{color:#fff}.demo-note{color:#35485d}