/* ====== Cabeçalho ====== */
.metro-hero {
  max-width: 1280px;
  margin: 20px auto 30px; /* aumentei de 8px para 30px */
  padding: 0 20px;
}

.metro-hero h1{
  margin:0 0 2px; font-weight:800; letter-spacing:.2px;
  color:#1e3a8a; font-size:clamp(22px,2.2vw,28px);
}
.metro-hero p{
  margin:0; color:#64748b; font-size:14px;
}

/* ====== Board e grupos ====== */
.metro-board{
  max-width:1280px; margin:8px auto 40px; padding:0 20px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px;
}
.metro-group{ min-width:0 }
.metro-title{
  margin:0 0 10px;
  font:700 13px/1.1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#1e3a8a;
  letter-spacing:.8px;
  text-transform:uppercase;
}

/* ====== Grid de tiles ====== */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
}

/* ====== Tiles ====== */
.tile{
  display:block; position:relative;
  border-radius:12px;
  text-decoration:none;
  padding:16px; min-height:120px;

  background:#e6f0ff;
  color:#2563eb;

  box-shadow:0 2px 4px rgba(37,99,235,0.12);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(37,99,235,0.18);
  background:#d9e9ff;
}
.tile:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 6px rgba(37,99,235,0.15);
}
.tile:focus-visible{
  outline:3px solid #2563eb;
  outline-offset:3px;
}

.tile .ic{
  position:absolute; right:14px; bottom:12px;
  font-size:28px; line-height:1; opacity:.9;
}
.tile .ti{
  display:block; font-weight:700; font-size:16px; letter-spacing:.2px;
}
.tile .sub{
  display:block; margin-top:6px; font-size:13px; opacity:.9;
}

/* tamanhos */
.tile.wide{ grid-column:span 2; }
.tile.tall{ grid-row:span 2; min-height:250px; }
.tile.big { grid-column:span 2; grid-row:span 2; min-height:250px; }