/* VidroZap · páginas públicas (calculadoras, tipologias, tabela) — 18/09/2026
   Papel e tinta, mesma paleta do app. Uma coluna, 16 px de calha no celular. */
:root{
  --fundo:#F3F6F5; --papel:#FFFFFF; --papel-2:#F7FAF9;
  --tinta:#14201D; --tinta-2:#4A5B56; --tinta-3:#7A8A86;
  --vidro:#0B6B5D; --vidro-escuro:#084A41; --vidro-claro:#E1EEEA;
  --linha:#DCE5E2; --linha-forte:#BCCAC7;
  --ambar:#8F5406; --ambar-claro:#FAF0DE;
  --alerta:#9C3724; --alerta-claro:#FBE9E5;
  --whats:#1FAF54;
  --raio:12px;
  --sombra:0 1px 2px rgba(20,32,29,.05),0 6px 20px -8px rgba(11,107,93,.12);
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){
  --fundo:#0C1211; --papel:#151E1C; --papel-2:#1B2624;
  --tinta:#E9F0EE; --tinta-2:#9DACA8; --tinta-3:#77867F;
  --vidro:#63C3AF; --vidro-escuro:#8FD8C8; --vidro-claro:#12302B;
  --linha:#25322F; --linha-forte:#33433F;
  --ambar:#E0A455; --ambar-claro:#332710;
  --alerta:#E68A76; --alerta-claro:#331915;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 6px 20px -8px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --fundo:#0C1211; --papel:#151E1C; --papel-2:#1B2624;
  --tinta:#E9F0EE; --tinta-2:#9DACA8; --tinta-3:#77867F;
  --vidro:#63C3AF; --vidro-escuro:#8FD8C8; --vidro-claro:#12302B;
  --linha:#25322F; --linha-forte:#33433F;
  --ambar:#E0A455; --ambar-claro:#332710;
  --alerta:#E68A76; --alerta-claro:#331915;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 6px 20px -8px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Barlow',system-ui,-apple-system,sans-serif;background:var(--fundo);color:var(--tinta);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
a{color:var(--vidro);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--vidro-escuro)}
.mono{font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;font-variant-numeric:tabular-nums}

/* ---- topo ---- */
.topo{background:linear-gradient(135deg,#0B2035 0%,#0A3A44 52%,#0B6B5D 100%);color:#fff}
.topo .in{max-width:860px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:14px}
.topo img{height:32px;width:auto;display:block}
.topo nav{margin-left:auto;display:flex;gap:14px;font-size:14px}
.topo nav a{color:#fff;opacity:.9;text-decoration:none;white-space:nowrap}
.topo nav a:hover{opacity:1;text-decoration:underline}
@media (max-width:560px){.topo nav a.esc{display:none}}

/* ---- miolo ---- */
main{max-width:860px;margin:0 auto;padding:22px 16px 60px}
.trilha{font-size:13px;color:var(--tinta-3);margin-bottom:14px}
.trilha a{color:var(--tinta-2)}
h1{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;font-size:clamp(28px,5.5vw,40px);line-height:1.08;letter-spacing:-.01em;margin:0 0 10px}
.lead{font-size:18px;color:var(--tinta-2);max-width:62ch;margin-bottom:22px}
h2{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;font-size:26px;line-height:1.15;margin:34px 0 10px}
h3{font-size:17px;font-weight:700;margin:22px 0 8px}
p{margin:0 0 12px;max-width:66ch}
ul,ol{margin:0 0 14px 22px;max-width:66ch}
li{margin-bottom:5px}
mark{background:var(--vidro-claro);color:inherit;padding:0 .2em;border-radius:3px}
small,.nota{font-size:13.5px;color:var(--tinta-3)}
.nota{margin:8px 0 14px}

/* ---- cartões ---- */
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:16px;box-shadow:var(--sombra);margin:14px 0}
.cartao h2,.cartao h3{margin-top:0}
.aviso{background:var(--ambar-claro);border-left:3px solid var(--ambar);border-radius:8px;padding:12px 14px;margin:14px 0;font-size:15px}
.aviso b{color:var(--ambar)}
.norma{background:var(--alerta-claro);border-left:3px solid var(--alerta);border-radius:8px;padding:12px 14px;margin:14px 0;font-size:15px}

/* ---- formulário da calculadora ---- */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 12px;margin:6px 0 14px}
.campo{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--tinta-2);font-weight:600}
.campo input,.campo select{font:inherit;font-size:17px;font-weight:500;color:var(--tinta);background:var(--papel-2);
  border:1px solid var(--linha-forte);border-radius:9px;padding:10px 11px;min-height:44px;width:100%}
.campo input:focus,.campo select:focus{outline:2px solid var(--vidro);outline-offset:1px;border-color:var(--vidro)}
.campo .un{font-weight:400;color:var(--tinta-3)}

/* ---- resultado ---- */
.res-grande{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0 16px}
.res-grande .n{background:var(--vidro-claro);border-radius:10px;padding:12px 14px}
.res-grande .n b{display:block;font-family:'Barlow Condensed','Barlow',sans-serif;font-size:30px;line-height:1;color:var(--vidro-escuro);margin-bottom:4px}
.res-grande .n span{font-size:13px;color:var(--tinta-2)}
.tabela{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 16px}
.tabela th,.tabela td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--linha);vertical-align:top}
.tabela th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-3);font-weight:700}
.tabela td.num,.tabela th.num{text-align:right;white-space:nowrap}
.tabela tr.grupo td{background:var(--papel-2);font-weight:700;font-size:13.5px;color:var(--tinta-2);padding-top:12px}
.tabela .det{display:block;font-size:13px;color:var(--tinta-3);margin-top:2px}
.tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}

/* ---- desenho ---- */
.desenho{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:12px;margin:14px 0;text-align:center}
.desenho svg{max-width:100%;height:auto;max-height:420px}
.desenho figcaption{font-size:13px;color:var(--tinta-3);margin-top:8px}

/* ---- o que fica no app (free cirúrgico) ---- */
.res-grande .n.trava{background:var(--papel-2);border:1px dashed var(--linha-forte)}
.res-grande .n.trava b{font-size:18px;color:var(--tinta-2);font-family:'Barlow',sans-serif}
.trava-txt{background:var(--vidro-claro);border-radius:10px;padding:12px 14px;font-size:15px;margin:6px 0 4px;max-width:none}
.campo select option:disabled{color:var(--tinta-3)}

/* ---- chamada pro app ---- */
.cta-botoes{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.cta .btn-2{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}
.cta .btn-2:hover{background:rgba(255,255,255,.22)}
.cta{background:linear-gradient(135deg,#0B2035 0%,#0A3A44 52%,#0B6B5D 100%);color:#fff;border-radius:var(--raio);padding:20px 18px;margin:30px 0 10px}
.cta h2{margin:0 0 6px;color:#fff}
.cta p{color:rgba(255,255,255,.85);margin-bottom:14px}
.btn{display:inline-block;background:#fff;color:var(--vidro-escuro);font-weight:700;text-decoration:none;padding:12px 18px;border-radius:10px;font-size:16px}
.btn:hover{color:var(--vidro)}
.btn-2{display:inline-block;background:var(--vidro);color:#fff;font-weight:700;text-decoration:none;padding:12px 18px;border-radius:10px;font-size:16px}
.btn-2:hover{color:#fff;background:var(--vidro-escuro)}

/* ---- listas de links ---- */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:12px 0 20px}
.grade a{display:block;background:var(--papel);border:1px solid var(--linha);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--tinta);box-shadow:var(--sombra)}
.grade a b{display:block;color:var(--vidro-escuro);margin-bottom:3px}
.grade a small{display:block;color:var(--tinta-3)}
.grade a:hover{border-color:var(--vidro)}
.grade .mini{display:flex;align-items:center;gap:10px}
.grade .mini .th{width:46px;height:36px;flex:none}
.grade .mini .th svg{width:100%;height:100%}

/* ---- rodapé ---- */
footer.pe{max-width:860px;margin:0 auto;padding:20px 16px 40px;font-size:13.5px;color:var(--tinta-3);border-top:1px solid var(--linha)}
footer.pe a{color:var(--tinta-2)}
footer.pe .links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}