/* ============================================================
   CALCULADORAS — estilo único das quatro (pisos, tijolos, forros, piscinas)

   Antes cada calculadora tinha a sua folha, quase idêntica às outras e com
   a cara de antes do redesign: sombra azulada, etiqueta azul-clara, caixa
   de mensagem azul-marinho, botão verde-limão e títulos em Barlow Condensed
   (fonte que o site nem carrega). Quem vinha de uma página de categoria
   sentia que tinha mudado de site, e qualquer ajuste precisava ser feito
   quatro vezes.

   Agora é uma folha só, na linguagem do style.css: papel, verde chapado,
   amarelo, Bree Serif nos títulos e nos números, cantos de 4px, sem sombra.
   As calculadoras rodam dentro de <iframe> e não enxergam o style.css,
   por isso as variáveis da marca são repetidas aqui — se mudar uma cor lá,
   mude aqui também.

   Página "embutida" (dentro do iframe de /calculadoras/) ganha a classe
   html.embutida, colocada pelo calc-comum.js antes da primeira pintura:
   some o logo, o rodapé e o recuo lateral, porque a página de fora já tem
   tudo isso. Aberta sozinha, a calculadora mostra logo e caminho de volta.
   ============================================================ */

:root{
  --verde:#008225;
  --verde-escuro:#04552a;
  --verde-tinta:#0b3b1f;
  --verde-vivo:#03c800;
  --amarelo:#fcfc00;
  --tinta:#161c18;
  --muted:#5f6a63;
  --borda:#d9ded7;
  /* borda de campo um tom acima da linha: campo de formulário precisa se
     ver como campo, não como mais um fio do layout */
  --campo:#b3bcb0;
  --papel:#f4f4ee;
  --raio:4px;
  --display:'Bree Serif',Georgia,'Times New Roman',serif;
  --corpo:'Barlow','Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
/* flow-root: a margem dos filhos não vaza para fora do body, então a altura
   que o calc-comum.js mede é a altura real da página */
body{margin:0;display:flow-root;font-family:var(--corpo);font-size:16px;line-height:1.5;color:var(--tinta);background:var(--papel)}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- Acessibilidade ---------- */
.pular-conteudo{position:fixed;top:0;left:0;z-index:10;transform:translateY(-120%);
  background:var(--amarelo);color:var(--verde-tinta);font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;padding:12px 18px;
  border:2px solid var(--verde-tinta);border-radius:0 0 var(--raio) 0;text-decoration:none}
.pular-conteudo:focus{transform:none}
#conteudo:focus{outline:none}
/* Embutida, o "pular" não tem o que pular (a página de fora já tem o seu),
   e ficaria preso no alto do iframe, fora da tela de quem rolou até aqui. */
html.embutida .pular-conteudo{display:none}

/* ---------- Cabeçalho ---------- */
.calc-topo{max-width:1180px;margin:0 auto;padding:22px 20px 0}
.calc-marca{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--borda)}
.calc-marca > a:first-child{flex:0 0 auto}
.calc-marca img{width:88px;height:auto}
.calc-voltar{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--verde);border-bottom:2px solid var(--amarelo);padding-bottom:3px;text-decoration:none;line-height:1.2}
.calc-voltar::before{content:"\2190  "}
.calc-voltar:hover{color:var(--verde-tinta);border-bottom-color:var(--verde-tinta)}
.calc-topo h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.2vw,34px);
  line-height:1.1;letter-spacing:-.005em;color:var(--verde-escuro);margin:0}
.calc-topo p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--muted);max-width:720px}

main{max-width:1180px;margin:0 auto;padding:22px 20px 32px}
body > footer{text-align:center;padding:0 20px 24px;color:var(--muted);font-size:13px}

/* Embutida: nada de logo, rodapé nem recuo lateral — o conteúdo alinha com
   as abas da página de fora. Os 5px sobram para o contorno de foco não ser
   cortado na borda do iframe (a página de fora compensa com margem -5px). */
html.embutida .calc-marca,
html.embutida body > footer{display:none}
html.embutida .calc-topo{padding:2px 5px 0}
html.embutida main{padding:18px 5px 6px}

/* ---------- Tipografia ---------- */
h2,h3{font-family:var(--display);font-weight:400;color:var(--verde-escuro);line-height:1.15;letter-spacing:-.005em}
h2{margin:0 0 16px;font-size:24px}
h3{margin:22px 0 10px;font-size:19px}
.muted{font-size:13px;color:var(--muted);line-height:1.45}
.ajuda{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45}

/* ---------- Estrutura ---------- */
.grid{display:grid;grid-template-columns:1fr 1.05fr;gap:20px;align-items:start}
/* Sem isto um item de grade nunca fica mais estreito que o próprio conteúdo:
   a tabela comparativa de tijolos esticava o card 49 px além da tela do
   celular. Com min-width:0 a tabela rola dentro do .result. */
.grid > *{min-width:0}
.card{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:24px}
/* O card do resultado leva o fio amarelo no topo, como o painel do hero:
   é ali que está a resposta. */
.grid > .card:last-child{border-top:5px solid var(--amarelo)}
.espaco-topo{margin-top:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.row-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- Abas internas (medidas x peças) ----------
   Diferentes das abas amarelas da página de fora, de propósito: lá se
   escolhe a calculadora, aqui o jeito de calcular. */
.tabs{display:inline-flex;flex-wrap:wrap;margin-bottom:18px;background:#fff;
  border:2px solid var(--verde);border-radius:var(--raio);overflow:hidden}
.tabs .tab{min-height:44px;border:0;border-radius:0;background:transparent;color:var(--verde-escuro);padding:11px 18px 10px}
.tabs .tab + .tab{border-left:2px solid var(--verde)}
.tabs .tab:hover{background:var(--papel)}
.tabs .tab.active{background:var(--verde);color:#fff}

/* ---------- Formulário ---------- */
label{display:block;font-weight:700;font-size:14.5px;line-height:1.3;margin:14px 0 6px;color:var(--tinta)}
input,select{width:100%;min-height:48px;padding:11px 12px;border:1px solid var(--campo);border-radius:var(--raio);
  font-size:16px;font-family:inherit;color:var(--tinta);background-color:#fff;transition:border-color .15s}
select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008225' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
input:hover,select:hover{border-color:var(--verde)}
input:focus-visible,select:focus-visible{outline:3px solid var(--verde-vivo);outline-offset:1px;border-color:var(--verde)}
input::placeholder{color:#8b958d}
input[readonly]{background:var(--papel);color:var(--muted);border-style:dashed;cursor:default}
input[readonly]:hover{border-color:var(--campo)}

.campo-destaque{background:var(--papel);border:1px solid var(--borda);border-left:5px solid var(--verde);
  border-radius:var(--raio);padding:2px 16px 16px;margin:16px 0}
.campo-destaque label{color:var(--verde-escuro)}

/* ---------- Botões ---------- */
button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
  padding:13px 18px 12px;border:2px solid transparent;border-radius:var(--raio);
  font-family:var(--corpo);font-weight:700;font-size:14px;line-height:1.15;text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s}
button:focus-visible{outline:3px solid var(--verde-vivo);outline-offset:2px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
/* Calcular */
.primary{background:var(--verde);border-color:var(--verde);color:#fff}
.primary:hover{background:var(--verde-escuro);border-color:var(--verde-escuro)}
/* Copiar mensagem para WhatsApp: é o objetivo da página, leva o amarelo
   do botão principal do site */
.green{background:var(--amarelo);border-color:var(--amarelo);color:var(--verde-tinta)}
.green:hover{background:var(--verde-tinta);border-color:var(--verde-tinta);color:var(--amarelo)}
.green::before{content:"";width:19px;height:19px;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2m0 1.67c4.55 0 8.24 3.7 8.24 8.24 0 4.55-3.69 8.24-8.24 8.24-1.5 0-2.96-.4-4.23-1.16l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.37c0-4.54 3.7-8.24 8.28-8.24M8.53 7.33c-.16 0-.43.06-.66.31-.22.25-.87.86-.87 2.07 0 1.22.89 2.39 1 2.56.14.17 1.76 2.67 4.25 3.73.59.27 1.05.42 1.41.53.59.19 1.13.16 1.56.1.48-.07 1.46-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.07-.1-.23-.16-.48-.27-.25-.14-1.47-.74-1.69-.82-.23-.08-.37-.12-.56.12-.16.25-.64.81-.78.97-.15.17-.29.19-.53.07-.26-.13-1.06-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.12-.24-.01-.39.11-.5.11-.11.27-.29.37-.44.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.11-.56-1.35-.77-1.84-.2-.48-.4-.42-.56-.43-.14 0-.3-.01-.47-.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2m0 1.67c4.55 0 8.24 3.7 8.24 8.24 0 4.55-3.69 8.24-8.24 8.24-1.5 0-2.96-.4-4.23-1.16l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.37c0-4.54 3.7-8.24 8.28-8.24M8.53 7.33c-.16 0-.43.06-.66.31-.22.25-.87.86-.87 2.07 0 1.22.89 2.39 1 2.56.14.17 1.76 2.67 4.25 3.73.59.27 1.05.42 1.41.53.59.19 1.13.16 1.56.1.48-.07 1.46-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.07-.1-.23-.16-.48-.27-.25-.14-1.47-.74-1.69-.82-.23-.08-.37-.12-.56.12-.16.25-.64.81-.78.97-.15.17-.29.19-.53.07-.26-.13-1.06-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.12-.24-.01-.39.11-.5.11-.11.27-.29.37-.44.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.11-.56-1.35-.77-1.84-.2-.48-.4-.42-.56-.43-.14 0-.3-.01-.47-.01'/%3E%3C/svg%3E") center/contain no-repeat}
/* Limpar */
.secondary{background:#fff;border-color:var(--campo);color:var(--verde-escuro)}
.secondary:hover{border-color:var(--verde)}
/* Imprimir (a classe se chama "danger" por herança do código antigo) */
.danger{background:transparent;border-color:transparent;color:var(--muted)}
.danger:hover{color:var(--verde-escuro);border-color:var(--borda)}

/* ---------- Mensagens ---------- */
.warn,.info,.erro{border-radius:var(--raio);padding:12px 14px;margin-top:12px;font-size:14px;line-height:1.5}
.warn{background:#fbfbd2;border-left:5px solid var(--verde-tinta);color:var(--verde-tinta)}
.info{background:#e8f2ea;border-left:5px solid var(--verde);color:var(--verde-tinta)}
.erro{background:#fbe9e7;border-left:5px solid #b3261e;color:#7a1611;display:none}
.card > .warn:only-child{margin-top:0}

/* A mensagem que vai para o WhatsApp: verde-tinta, como a barra de cima e
   o bloco do horário no site. */
.copybox{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--verde-tinta);color:#fff;
  border-radius:var(--raio);padding:14px 16px;font-size:14px;line-height:1.5;margin-top:10px}

/* ---------- Resultado ---------- */
.result{border-radius:var(--raio);padding:16px;background:var(--papel);overflow-x:auto}
.result > p{margin:0;color:var(--muted)}
.big{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.05;color:var(--verde-escuro)}
.pill{display:inline-block;padding:6px 10px 5px;border-radius:2px;background:#fff;border:1px solid var(--borda);
  color:var(--tinta);font-weight:600;font-size:13.5px;line-height:1.3;margin:4px 4px 4px 0}

/* Os dois cards do topo do resultado. Pisos, tijolos e piscinas usam
   card-area/card-sistema; forros usa metric-card/sistema-destaque — mesma
   aparência para as quatro lerem como uma família. */
.resultado-linha,.resultado-topo{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;margin-bottom:10px}
.card-area,.metric-card,.card-sistema{border-radius:var(--raio);padding:16px 18px;min-height:118px;
  display:flex;flex-direction:column;justify-content:center}
.card-area,.metric-card{background:#fff;border:1px solid var(--borda)}
.card-sistema,.metric-card.sistema-destaque{background:var(--verde);border:1px solid var(--verde);color:#fff}
.card-label,.metric-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  line-height:1.25;color:var(--muted);margin-bottom:6px}
.card-sistema .card-label,.sistema-destaque .metric-label{color:var(--amarelo)}
.valor-sistema,.sistema-destaque .big{font-family:var(--display);font-weight:400;font-size:38px;line-height:1;color:#fff}
.sub-sistema,.sistema-destaque .sub{margin-top:8px;font-size:14px;line-height:1.3;font-weight:600;color:rgba(255,255,255,.92)}

/* Tabelas de detalhe: só fios horizontais, como catálogo impresso. A última
   linha (quanto comprar) ganha marca-texto amarelo. */
table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px;background:#fff;border:1px solid var(--borda)}
th,td{padding:9px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--borda)}
th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:2px solid var(--verde)}
tbody tr:last-child td{border-bottom:0}
table:not(.tabela-comparativa) tbody tr:last-child td{background:#fbfbd2}

/* ---------- Só tijolos: comparativo entre 6, 8 e 21 furos ---------- */
.tabela-comparativa th.selecionado,
.tabela-comparativa td.selecionado{background:#e8f2ea}
.tabela-comparativa .badge-tipo{display:inline-block;background:var(--amarelo);color:var(--verde-tinta);
  font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 6px;border-radius:2px;margin-left:6px;vertical-align:1px}

/* ---------- Só piscinas ---------- */
/* O valor é o par filtro + bomba, não um número: a 38px estourava o card no
   celular, e "FM-100 + BM-100" não pode quebrar no meio do código. */
.card-sistema .valor-sistema{overflow-wrap:anywhere}
.piscinas .valor-sistema{font-size:30px}
/* 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;border-color:#8a5a00}
.status-ok{color:#0b7a3b;font-weight:700}
.status-limite{color:#8a5a00;font-weight:700}
.status-ruim{color:#b3261e;font-weight:700}
.orientacao{margin:10px 0 0}

/* ---------- Celular ---------- */
@media (max-width:900px){
  .grid,.resultado-linha,.resultado-topo{grid-template-columns:1fr}
  .row,.row3{grid-template-columns:1fr;gap:0}
  .calc-topo{padding:18px 16px 0}
  main{padding:18px 16px 28px}
  .card{padding:18px 16px}
  .grid > .card:last-child{padding-top:16px}
  h2{font-size:22px}
  .big{font-size:30px}
  .valor-sistema,.sistema-destaque .big{font-size:34px}
  .piscinas .valor-sistema{font-size:27px}
  .card-area,.metric-card,.card-sistema{min-height:auto;padding:14px 16px}

  /* abas ocupando a largura, meio a meio */
  .tabs{display:flex}
  .tabs .tab{flex:1 1 0;padding:10px 8px 9px;font-size:12.5px}

  /* botões em dedo: Calcular e Limpar lado a lado, WhatsApp na linha toda */
  .actions button{flex:1 1 calc(50% - 5px)}
  .actions .green{flex-basis:100%}

  table{font-size:13px}
  th,td{padding:8px}
}

/* ---------- Esconder ----------
   No fim do arquivo de propósito: tem a mesma força de .row e .row3
   (display:grid), então precisa vir depois delas para ganhar. Na primeira
   versão desta folha ficou antes, e "Altura das paredes" aparecia com
   "Só o chão" marcado. */
.hidden,.oculto{display:none}

@media print{
  .actions,.copybox,button,.tabs,.calc-marca,.pular-conteudo{display:none}
  body{background:#fff}
  .card{break-inside:avoid}
  main{max-width:100%;padding:8px}
}