/* ============================================
   Case — Detecção de Ativos Elétricos
   Depende de style.css (variáveis --si-*)
   ============================================ */

/* ---- Badges do hero ---- */
.case-badges { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.4rem; }
.case-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#fff; border-radius:20px; padding:.32rem 1rem; font-size:.82rem; font-weight:600;
}
.case-badge i { color:var(--si-green); }

/* ---- Slider antes/depois ---- */
.ba-slider {
  position:relative; width:100%; aspect-ratio:4/3; overflow:hidden;
  border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.14);
  user-select:none; touch-action:pan-y; background:#0b1b34;
}
.ba-slider img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ba-slider .ba-after { clip-path: inset(0 0 0 var(--ba,50%)); }
.ba-handle {
  position:absolute; top:0; bottom:0; left:var(--ba,50%); width:3px;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.2); cursor:ew-resize; z-index:3;
}
.ba-handle::after {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231a3a6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 6 3 12 9 18'/%3e%3cpolyline points='15 6 21 12 15 18'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:center;
}
.ba-tag {
  position:absolute; bottom:10px; z-index:2; font-size:.72rem; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:#fff; padding:.2rem .6rem;
  border-radius:5px; background:rgba(0,0,0,.55);
}
.ba-tag.before { left:10px; } .ba-tag.after { right:10px; background:rgba(16,185,129,.85); }
.ba-caption { font-size:.85rem; color:var(--si-gray); margin-top:.7rem; line-height:1.5; }

/* ---- Stat cards (números) ---- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.1rem; }
.stat-card {
  background:#fff; border:1px solid var(--si-border); border-radius:14px;
  padding:1.6rem 1.2rem; text-align:center; box-shadow:0 2px 14px rgba(0,0,0,.05);
}
.stat-num { font-size:2.1rem; font-weight:800; color:var(--si-primary); line-height:1; }
.stat-num .suffix { color:var(--si-green); }
.stat-label { font-size:.82rem; color:var(--si-gray); margin-top:.5rem; line-height:1.4; }

/* ---- Grid de classes / imagens largas ---- */
.case-figure { border-radius:14px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.1); }
.case-figure img { width:100%; height:auto; display:block; }
.case-fig-cap { font-size:.85rem; color:var(--si-gray); margin-top:.7rem; }

/* ---- Gráfico SVG ---- */
.chart-wrap { background:#fff; border:1px solid var(--si-border); border-radius:16px; padding:1.5rem; box-shadow:0 2px 16px rgba(0,0,0,.06); }
.chart-line { fill:none; stroke:var(--si-green); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000); transition:stroke-dashoffset 1.6s ease; }
.chart-wrap.animate .chart-line { stroke-dashoffset:0; }
.chart-area { fill:url(#chartGrad); opacity:0; transition:opacity 1s ease .4s; }
.chart-wrap.animate .chart-area { opacity:1; }
.chart-dot { fill:#fff; stroke:var(--si-green); stroke-width:3; opacity:0; transition:opacity .4s ease; }
.chart-wrap.animate .chart-dot { opacity:1; }
.chart-grid line { stroke:var(--si-border); stroke-width:1; }
.chart-txt { fill:var(--si-gray); font-size:11px; font-family:'Inter',sans-serif; }
.chart-val { fill:var(--si-primary); font-size:12px; font-weight:700; font-family:'Inter',sans-serif; }

/* ---- Tabela de versões ---- */
.ver-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.ver-table th, .ver-table td { padding:.6rem .8rem; border-bottom:1px solid var(--si-border); text-align:left; }
.ver-table th { color:var(--si-gray); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; }
.ver-table tr.current { background:rgba(16,185,129,.07); font-weight:700; color:var(--si-primary); }

/* ---- Credit / disclaimer ---- */
.case-credit { font-size:.85rem; color:var(--si-gray); font-style:italic; line-height:1.6; }

@media (max-width:768px){
  .ba-slider { aspect-ratio:3/2; }
  .stat-num { font-size:1.7rem; }
}