/* ==========================================================================
   ELETRICISTA — grafite e amarelo, Space Grotesk
   Esqueleto em ../base/servicos.css. Aqui: a ferramenta e o tom do modelo.
   ========================================================================== */

.sv-logo { background: var(--escuro); color: var(--destaque); }
.sv-hero-fundo { background: linear-gradient(100deg, rgba(14,16,22,.92) 0%, rgba(14,16,22,.7) 55%, rgba(14,16,22,.25)), var(--hero) center / cover; }
.sv-hero-fundo h1 em { display: inline; background: linear-gradient(transparent 62%, rgba(255,194,26,.35) 0); color: #fff; }
.sv-confianca { background: var(--escuro); }
.sv-final { background: var(--destaque); color: var(--escuro); }
.sv-final .sv-botao { background: var(--escuro); border-color: var(--escuro); color: #fff; }
.sv-final .sv-botao.contorno { background: transparent; color: var(--escuro); border-color: var(--escuro); }
.sv-serv-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #fff6d6; }

/* Ferramenta */
.el-grade { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.el-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 14px; background: var(--fundo); border: 1px solid var(--linha); margin-bottom: 8px; }
.el-modo button { min-height: 48px; border-radius: 10px; font-weight: 800; font-size: .95rem; color: var(--suave); }
.el-modo button[aria-selected="true"] { background: var(--escuro); color: #fff; }
.el-perigo b { color: #b3261e; }
.el-alerta-forte { background: #fdecea; border-color: #f5b8b2; color: #7a1712; }
.el-itens { display: grid; gap: 8px; }
.el-itens li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo); }
.el-itens li > span { font-size: 1.3rem; text-align: center; }
.el-itens b { font-size: .96rem; }
.el-qtd { display: flex; align-items: center; gap: 4px; }
.el-qtd button { width: 40px; height: 40px; border-radius: 10px; background: var(--papel); border: 1px solid var(--linha); font-size: 1.2rem; font-weight: 800; }
.el-qtd output { min-width: 26px; text-align: center; font-weight: 800; }
.el-detalhe { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-weight: 700; font-size: .9rem; }
.el-detalhe small { font-weight: 500; color: var(--suave); }
.el-detalhe textarea { padding: 10px 14px; border-radius: 12px; border: 2px solid var(--linha); background: var(--papel); resize: vertical; }
.el-resumo { position: sticky; top: 84px; }
.el-tag-urg { display: inline-block; background: #fdecea; color: #b3261e; font-weight: 800; font-size: .85rem; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.el-meta { border-top: 1px solid var(--linha); padding-top: 10px; color: var(--suave); }
.el-meta b { color: var(--texto); }
.el-ligar { margin-top: 8px; }

@media (max-width: 900px) {
  .el-grade { grid-template-columns: 1fr; }
  .el-resumo { position: static; }
}
@media (max-width: 600px) {
  .el-modo button { font-size: .84rem; }
}