/* Cálculo Aberto — folha de estilo única.
   Sem fontes externas de propósito: página que carrega rápido ranqueia melhor. */

:root{
  --azul:#0F4C5C;
  --azul-claro:#1B6B7F;
  --verde:#0B7A5B;
  --verde-claro:#E6F2ED;
  --vermelho:#9E2B0E;
  --vermelho-claro:#FBEAE4;
  --amarelo-claro:#FDF3DC;
  --amarelo-escuro:#7A5A10;
  --tinta:#14201F;
  --tinta-2:#46534F;
  --cinza:#6B7876;
  --linha:#DDE3E1;
  --fundo:#F7F9F8;
  --papel:#FFFFFF;
  --raio:6px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.6; color:var(--tinta); background:var(--fundo);
}
.container{max-width:920px; margin:0 auto; padding:0 18px}

/* ---------- cabeçalho ---------- */
.topo{background:var(--azul); color:#fff}
.topo .container{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px}
.marca{font-weight:700; font-size:19px; color:#fff; text-decoration:none; letter-spacing:-.02em; white-space:nowrap}
.marca span{opacity:.72; font-weight:400}
.topo nav{display:flex; gap:18px; flex-wrap:wrap; font-size:14.5px}
.topo nav a{color:#DCEBEF; text-decoration:none}
.topo nav a:hover,.topo nav a:focus{color:#fff; text-decoration:underline}

/* ---------- estrutura ---------- */
main{padding:28px 0 56px}
h1{font-size:clamp(26px,4.4vw,36px); line-height:1.18; letter-spacing:-.02em; margin:0 0 10px}
h2{font-size:22px; letter-spacing:-.01em; margin:36px 0 12px}
h3{font-size:17.5px; margin:24px 0 8px}
p{margin:0 0 14px; max-width:70ch}
.sub{font-size:18px; color:var(--tinta-2); max-width:66ch; margin-bottom:22px}
a{color:var(--azul-claro)}
ul,ol{max-width:70ch; padding-left:22px}
li{margin-bottom:7px}

.card{background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio); padding:22px}
.card + .card{margin-top:18px}

/* ---------- formulário ---------- */
form{margin:0}
.campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.campo{display:flex; flex-direction:column}
.campo label{font-size:14px; font-weight:600; margin-bottom:5px; color:var(--tinta-2)}
.campo .dica{font-size:12.5px; color:var(--cinza); font-weight:400; margin-top:4px; line-height:1.4}
input,select{
  font:inherit; font-size:16px; padding:10px 12px;
  border:1px solid #C3CDCA; border-radius:var(--raio); background:#fff; color:var(--tinta);
  width:100%; min-height:44px;
}
input:focus,select:focus{outline:2px solid var(--azul-claro); outline-offset:1px; border-color:var(--azul-claro)}
.linha-check{display:flex; align-items:flex-start; gap:9px; margin-top:4px}
.linha-check input{width:auto; min-height:0; margin-top:4px}
.linha-check label{font-weight:500; font-size:15px; color:var(--tinta); margin:0}
button{
  font:inherit; font-weight:600; font-size:16.5px; cursor:pointer;
  background:var(--verde); color:#fff; border:0; border-radius:var(--raio);
  padding:13px 26px; min-height:48px;
}
button:hover{background:#096349}
button:focus-visible{outline:3px solid var(--azul-claro); outline-offset:2px}
button.secundario{background:transparent; color:var(--azul-claro); border:1px solid #C3CDCA; font-weight:500}
button.secundario:hover{background:#EEF3F2; color:var(--azul)}
.acoes{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; align-items:center}

/* ---------- resultado ---------- */
.resultado{margin-top:26px}
.resultado[hidden]{display:none}
.destaque{
  background:var(--verde-claro); border:1px solid #B9DCCC; border-left:5px solid var(--verde);
  border-radius:var(--raio); padding:18px 22px; margin-bottom:20px;
}
.destaque .rot{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--verde); margin:0 0 4px}
.destaque .val{font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.destaque .obs{font-size:14px; color:var(--tinta-2); margin:7px 0 0; max-width:none}

.memoria{width:100%; border-collapse:collapse; font-size:15px; margin:10px 0 4px}
.memoria caption{text-align:left; font-weight:700; font-size:15px; padding:14px 0 8px; color:var(--tinta)}
.memoria th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--cinza); font-weight:600; padding:7px 10px; border-bottom:1px solid var(--linha);
}
.memoria th:last-child{text-align:right}
.memoria td{padding:9px 10px; border-bottom:1px solid #EDF1F0; vertical-align:top}
.memoria td:last-child{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.memoria tr.total td{font-weight:700; border-top:2px solid var(--tinta); border-bottom:0; background:#F4F7F6}
.memoria tr.negativo td:last-child{color:var(--vermelho)}
.memoria .como{display:block; font-size:13px; color:var(--cinza); margin-top:3px; line-height:1.45}
.rolagem{overflow-x:auto; -webkit-overflow-scrolling:touch}

.nota{
  background:var(--amarelo-claro); border-left:4px solid #D8A93A; border-radius:0 var(--raio) var(--raio) 0;
  padding:14px 18px; margin:20px 0; font-size:15px;
}
.nota p{margin:0; max-width:none}
.nota strong{color:var(--amarelo-escuro)}
.aviso{font-size:14px; color:var(--cinza); border-top:1px solid var(--linha); padding-top:16px; margin-top:28px}

/* ---------- blocos de ligação entre calculadoras ---------- */
.proximo{margin-top:34px}
.proximo h2{margin-top:0}
.grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.item{
  display:block; background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px 18px; text-decoration:none; color:var(--tinta); transition:border-color .15s;
}
.item:hover{border-color:var(--verde); box-shadow:0 1px 3px rgba(20,32,31,.08)}
.item strong{display:block; font-size:16.5px; margin-bottom:4px; color:var(--azul)}
.item span{font-size:14px; color:var(--tinta-2); line-height:1.45; display:block}

/* ---------- espaço de anúncio ---------- */
.anuncio{
  margin:30px 0; min-height:100px; display:flex; align-items:center; justify-content:center;
  background:#EFF3F2; border:1px dashed #C9D3D1; border-radius:var(--raio);
  color:var(--cinza); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
}

/* ---------- rodapé ---------- */
footer{background:#0B3A46; color:#C6DAE0; padding:34px 0; font-size:14.5px}
footer .container{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px}
footer a{color:#fff; text-decoration:none}
footer a:hover{text-decoration:underline}
footer h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 10px}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin-bottom:6px}
footer p{max-width:38ch; margin:0; line-height:1.55}

/* ---------- impressão / PDF ---------- */
@media print{
  .topo,footer,.anuncio,.acoes,.proximo,form,.aviso-tela{display:none !important}
  body{background:#fff; font-size:12pt}
  .card{border:0; padding:0}
  .container{max-width:none; padding:0}
  .destaque{border:1px solid #999; background:#fff}
  .memoria{font-size:11pt}
  .impressao-cabecalho{display:block !important; border-bottom:2px solid #000; padding-bottom:8px; margin-bottom:16px}
}
.impressao-cabecalho{display:none}

@media (max-width:560px){
  body{font-size:16px}
  .destaque .val{font-size:28px}
  .memoria{font-size:14px}
  .memoria td,.memoria th{padding:8px 6px}
}