/* =========================================================
   ProjetoLab — design tokens & componentes compartilhados
   Usado por: projetolab.html, calculadora-elevadores.html, gerador-qr.html
   ========================================================= */

:root{
  --bg:#FFFFFF;
  --bg-soft:#F6F7FB;
  --ink:#1E2330;
  --ink-soft:#68707E;
  --ink-faint:#98A0AC;
  --border:#E7E9F1;
  --card:#FFFFFF;
  --violet:#4682B4;      /* Steel Blue — cor de destaque da marca */
  --violet-dim:#EAF2F8;
  --violet-line:#C9DEEC;
  --green:#16A34A;
  --green-dim:#E9F9EF;
  --amber:#D97706;
  --amber-dim:#FEF3E2;
  --blue:#2563EB;
  --blue-dim:#EAF1FF;
  --red:#E23D3D;
  --red-dim:#FDEDED;
  --shadow: 0 1px 2px rgba(20,22,30,.04), 0 8px 24px rgba(20,22,30,.06);
  --shadow-lg: 0 4px 10px rgba(20,22,30,.05), 0 20px 44px rgba(20,22,30,.10);
  --display:'Plus Jakarta Sans', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:14px;
}
*{ box-sizing:border-box; }
body{ margin:0; }

/* ---------------- logo (reutilizado em toda a suíte) ---------------- */
.pl-logo{
  font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.01em;
  display:flex; align-items:center; gap:0; text-decoration:none;
}
.pl-logo .g{ color:var(--ink); }
.pl-logo .lab{ color:var(--violet); }

/* ---------------- nav do hub ---------------- */
.pl-nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 24px; border-bottom:1px solid var(--border);
  max-width:1160px; margin:0 auto;
}
.pl-navlinks{ display:flex; gap:28px; }
.pl-navlinks a{ font-size:14px; color:var(--ink-soft); text-decoration:none; font-weight:500; }
.pl-navlinks a:hover{ color:var(--ink); }
@media (max-width:760px){ .pl-navlinks{ display:none; } }
.pl-nav-cta{
  font-family:var(--body); font-weight:600; font-size:13.5px; color:#fff; background:var(--violet);
  padding:10px 18px; border-radius:9px; text-decoration:none; white-space:nowrap;
}

/* ---------------- barra superior das ferramentas (link de volta ao hub) ---------------- */
.pl-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 24px; border-bottom:1px solid var(--border);
  max-width:1180px; margin:0 auto;
  font-family:var(--body);
}
.pl-back{
  font-family:var(--body); font-weight:600; font-size:13.5px; color:var(--ink-soft); text-decoration:none;
  display:flex; align-items:center; gap:6px;
}
.pl-back:hover{ color:var(--violet); }
.pl-tool-badge{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); border:1px solid var(--border);
  padding:5px 11px; border-radius:100px; background:var(--bg-soft);
}

/* ---------------- botões ---------------- */
.pl-btn-primary{
  font-family:var(--body); font-weight:600; font-size:14.5px; color:#fff; background:var(--violet);
  padding:13px 22px; border-radius:9px; text-decoration:none; box-shadow:var(--shadow);
  border:none; cursor:pointer; display:inline-block;
}
.pl-btn-secondary{
  font-family:var(--body); font-weight:600; font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid var(--border); padding:13px 22px; border-radius:9px; text-decoration:none;
  cursor:pointer; display:inline-block;
}

/* ---------------- espaço de anúncio ---------------- */
.pl-ad{
  margin:36px 0; padding:14px; border:1px dashed #D7DAE3; border-radius:10px;
  display:flex; align-items:center; justify-content:center; min-height:60px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--bg-soft);
}
.pl-ad.inline{ min-height:88px; }

/* ---------------- rodapé simples (páginas de ferramenta) ---------------- */
.pl-footer-simple{
  max-width:1180px; margin:50px auto 0; padding:20px 24px 30px; border-top:1px solid var(--border);
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---------------- rodapé completo (hub + páginas de ferramenta) ---------------- */
.pl-footer-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.pl-footer{ margin-top:60px; border-top:1px solid var(--border); padding:34px 0 26px; }
.pl-footer-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:26px; }
.pl-footer-brand p{ font-size:13px; color:var(--ink-soft); max-width:32ch; margin:10px 0 0; }
.pl-footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.pl-footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin:0 0 12px; }
.pl-footer-col a{ display:block; font-size:13.5px; color:var(--ink-soft); text-decoration:none; margin-bottom:9px; }
.pl-footer-col a:hover{ color:var(--ink); }
.pl-footer-bottom{ border-top:1px solid var(--border); padding-top:18px; font-size:12.5px; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }