/* Topo da home: escolha entre a demo animada e a vitrine da area "Codigo".
   Os cartoes (.cl-*) vem de code-area.css, os mesmos do painel do consultorio. */
.sc-mode{display:flex;gap:6px;justify-content:flex-end;margin:0 0 12px;flex-wrap:wrap}
.sc-mode[hidden]{display:none}
.sc-mode-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:.84rem;font-weight:600;color:#E2E8F0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 15px;transition:.2s}
.sc-mode-btn:hover{background:rgba(255,255,255,.14)}
.sc-mode-btn[aria-pressed="true"]{background:#22C55E;border-color:#22C55E;color:#08331A}
.sc-mode-btn:focus-visible,.cl-showcase a:focus-visible{outline:3px solid #22C55E;outline-offset:2px}

.cl-showcase{background:var(--studio-bg);color:var(--studio-text);border:1px solid var(--studio-border);border-radius:20px;padding:18px;box-shadow:0 30px 70px -35px rgba(0,0,0,.7);font-family:'Karla','Inter',sans-serif;text-align:left}
.cl-showcase[hidden]{display:none}
.cl-show-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.cl-show-eyebrow{display:block;color:#a5b4fc;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;font-weight:900}
.cl-show-title{font-size:1.35rem;font-weight:900}
.cl-show-btn{display:inline-flex;align-items:center;background:var(--studio-accent);color:#fff;border-radius:9px;padding:7px 11px;font-weight:800;font-size:.78rem;white-space:nowrap}
.cl-show-btn.small{padding:5px 9px;font-size:.72rem}
.cl-show-btn.ghost{background:var(--studio-panel-2);border:1px solid var(--studio-border);color:var(--studio-text)}
.cl-show-live{display:flex;gap:10px;align-items:center;background:var(--studio-panel);border:1px solid var(--studio-border);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.cl-show-live div{display:grid;gap:2px;min-width:0}
.cl-show-live strong{font-size:.84rem}
.cl-show-live span{color:var(--studio-muted);font-size:.74rem}
.cl-show-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.cl-show-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cl-showcase .cl-body{padding:10px 11px 12px;gap:6px}
.cl-showcase .cl-body h3{font-size:.86rem}
.cl-showcase .cl-body p{font-size:.7rem}
.cl-show-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.cl-show-foot p{margin:0;color:var(--studio-muted);font-size:.8rem;flex:1 1 260px}
.cl-show-cta{display:inline-flex;background:#22C55E;color:#08331A;font-weight:800;border-radius:999px;padding:9px 16px;text-decoration:none;font-size:.86rem;white-space:nowrap}
.cl-show-cta:hover{background:#16a34a;color:#fff}
@media (max-width:991.98px){ .sc-mode{justify-content:center} }
@media (max-width:640px){ .cl-show-grid{grid-template-columns:1fr} .cl-showcase{padding:14px} }
@media (prefers-reduced-motion: reduce){ .sc-mode-btn{transition:none} }