:root{
  --blue:#1f4f82;
  --blue-2:#2b6aa8;
  --bg:#eef3f6;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#2b2f36;
  --border:#b9c7d6;
  --shadow: 0 2px 6px rgba(0,0,0,0.08);

  /* Tipografia travada (px) para ficar pixel-perfect no desktop */
  --fs-title: 14px;
  --lh-title: 16px;
  --fs-name: 16px;
  --lh-name: 18px;
  --fs-spec: 12px;
  --lh-spec: 14px;
  --fs-status: 8px;
  --lh-status: 10px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

.top-line{
  height:2px;
  background:var(--blue-2);
}

.header{
  background:#fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.header__inner{
  width:min(1500px, 94vw);
  margin:0 auto;
  padding:18px 0;
  display:flex;
  align-items:center;
}

.logo{

  /*height:46px;
  width:auto;
  display:block;*/

  height: 35px; /* Ajuste a altura conforme necessário */
  width: auto;
}

.page{
  width:min(1500px, 94vw);
  margin:0 auto;
  padding:18px 0 28px;
}

.title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
}

.title{
  margin:0;
  font-size:var(--fs-title);
  line-height:var(--lh-title);
  font-weight:700;
  color:#113b62;
}

.status{
  margin:0;
  margin-left:auto;
  font-size:var(--fs-status);
  line-height:var(--lh-status);
  color:#3a4a5c;
  text-align:right;
  white-space:nowrap;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}

.card{
  display:block;
  background:var(--card);
  border: 1px solid var(--border);
  border-radius:12px;
  padding:10px;
  text-decoration:none;
  box-shadow: var(--shadow);
  /*transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;*/
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.card:hover{
  /*
  transform: translateY(-1px);
  box-shadow: 0 6px 10px rgba(15, 23, 42, .12);
  border-color: rgba(31, 79, 130, .55);*/

  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: rgb(28, 70, 116);
  background: linear-gradient(135deg, rgba(28,70,116,0.2), #ffffff);
}

.card__name{
  margin:0 0 6px;
  font-size:var(--fs-name);
  line-height:var(--lh-name);
 /* font-weight:800;*/
  font-weight: bold;
  color: var(--blue);
}

.card__spec{
  margin:0;
  font-size:var(--fs-spec);
  line-height:var(--lh-spec);
  color:#1f2937;
}

@media (max-width: 1020px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .page{ padding-top:14px; }
  .title-row{ gap:8px; }
  .grid{ grid-template-columns: 1fr; gap:14px; }
}