:root{
      --azul:#03c800;
      --azul2:#fcfc00;
      --verde:#008225;
      --cinza:#f3f6f8;
      --texto:#1f2933;
      --borda:#d8e2ea;
      --alerta:#fff7e6;
      --erro:#ffecec;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:'Barlow',Arial,Helvetica,sans-serif;background:#f4f4ee;color:var(--texto)}
    header{position:relative;background:#008225;color:#fff;padding:24px 18px 24px 150px;text-align:center;min-height:104px}
    header h1{margin:0;font-size:26px;font-family:'Barlow Condensed','Barlow',Arial,sans-serif}
    header p{margin:8px 0 0;font-size:15px;opacity:.95}
    .vimezer-logo{position:absolute;top:14px;left:22px;width:110px;max-width:18vw;height:auto;object-fit:contain;background:#fff;border-radius:var(--raio);padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
    main{max-width:1180px;margin:0 auto;padding:20px}
    .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;align-items:start}
    .card{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:18px;box-shadow:0 6px 20px rgba(15,95,143,.08)}
    h2,h3{font-family:'Barlow Condensed','Barlow',Arial,sans-serif}
    h2{margin:0 0 14px;color:var(--texto);font-size:20px}
    h3{margin:16px 0 10px;color:var(--texto);font-size:17px}
    label{display:block;font-weight:700;margin:11px 0 5px;font-size:14px}
    input,select{width:100%;padding:12px;border:1px solid var(--borda);border-radius:var(--raio);font-size:16px;font-family:inherit;background:#fff}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
    .muted{font-size:12px;color:#5f6f7d;line-height:1.4}
    .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    button{border:none;border-radius:var(--raio);padding:12px 14px;font-weight:700;cursor:pointer;font-size:14px;font-family:inherit}
    .primary{background:var(--azul);color:#fff}
    .secondary{background:#e7f2f8;color:var(--texto)}
    .green{background:var(--verde);color:#fff}
    .danger{background:#f1f1f1;color:#333}
    .result{border-radius:var(--raio);padding:16px;background:#f7fbfd;border:1px solid var(--borda)}
    .big{font-size:30px;font-weight:800;color:var(--texto)}
    .pill{display:inline-block;padding:6px 10px;border-radius:3px;background:#e6f4ff;color:var(--texto);font-weight:700;font-size:13px;margin:4px 4px 4px 0}
    table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
    th,td{border:1px solid var(--borda);padding:9px;text-align:left;vertical-align:top}
    th{background:#eaf4fa;color:var(--texto)}
    tr:nth-child(even) td{background:#fbfdff}
    .warn{background:var(--alerta);border:1px solid #f4d08b;border-radius:var(--raio);padding:12px;margin-top:12px;font-size:13px;line-height:1.45}
    .erro{background:var(--erro);border:1px solid #ffb8b8;border-radius:var(--raio);padding:12px;margin-top:12px;font-size:13px;display:none}
    .copybox{white-space:pre-wrap;background:#0b2233;color:#fff;border-radius:var(--raio);padding:13px;font-size:13px;line-height:1.45;margin-top:10px}
    .ok{color:#0b7a5b;font-weight:700}
    footer{text-align:center;padding:18px;color:#637383;font-size:12px}
    @media(max-width:900px){.grid{grid-template-columns:1fr}.row,.row3{grid-template-columns:1fr}header{padding:18px 18px 20px;min-height:auto}.vimezer-logo{position:static;display:block;margin:0 auto 12px 0;width:86px;max-width:30vw}header h1{font-size:22px}}
    @media print{.actions,.copybox,button{display:none}body{background:#fff}.card{box-shadow:none;break-inside:avoid}main{max-width:100%;padding:8px}}

.espaco-topo{margin-top:18px}
.oculto{display:none}

.ajuda{display:block;margin-top:6px;color:#6b7a86;font-size:12.5px;line-height:1.45}

/* --- Resultado em dois cards, igual às outras calculadoras -------------
   Substitui a tabela de 7 colunas que só tinha uma linha e alargava a
   página no celular (390 -> 549 px). As classes são as mesmas de
   pisos-calc.css e tijolos-calc.css, para as quatro calculadoras lerem
   como uma família. */
.resultado-linha{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
  margin-bottom:8px;
}
.card-area{
  background:#fff;
  border:2px solid var(--borda);
  border-radius:var(--raio);
  padding:18px 20px;
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.card-sistema{
  background:#008225;
  color:#fff;
  border-radius:var(--raio);
  padding:18px 20px;
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,130,37,.34);
  /* "FM-100 + BM-100" não pode quebrar no meio do código do produto */
  overflow-wrap:anywhere;
}
/* Acima dos 240 m³ da tabela não há kit: o card muda de cor para o
   cliente não ler "Projeto" como se fosse o nome de um produto. */
.card-sistema--alerta{background:#8a5a00;box-shadow:0 8px 24px rgba(138,90,0,.3)}
.card-label{
  display:block;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#5f6f7d;
  margin-bottom:6px;
}
.card-sistema .card-label{color:rgba(255,255,255,.92);font-size:15px;line-height:1.1;margin-bottom:8px}
/* Menor que nas outras calculadoras: aqui o valor é o par filtro + bomba,
   não um número — a 38px estourava a largura do card no celular. */
.valor-sistema{font-size:28px;line-height:1.05;font-weight:900;color:#fff;letter-spacing:-.02em}
.sub-sistema{margin-top:8px;font-size:14px;line-height:1.2;font-weight:900;color:rgba(255,255,255,.96)}

.status-ok{color:#0b7a5b;font-weight:800}
.status-limite{color:#8a5a00;font-weight:800}
.status-ruim{color:#b00020;font-weight:800}
.orientacao{margin:10px 0 0;font-size:13px}
/* Explicação de quando a vazão puxou o kit para cima: verde-claro, para se
   distinguir do .warn amarelo, que é aviso. Isto é informação. */
.info{background:#eefaf0;border:1px solid #cfeed6;border-radius:var(--raio);padding:12px;margin-top:12px;font-size:13px;line-height:1.45}

@media(max-width:900px){
  .resultado-linha{grid-template-columns:1fr}
  .card-area,.card-sistema{min-height:auto;padding:14px}
  .card-sistema .card-label{font-size:13px}
  .valor-sistema{font-size:26px}
  .sub-sistema{font-size:13px;margin-top:6px}
}