body{font-family:Arial,sans-serif;background:#F8FAFC;margin:0}
.topo{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.marca{display:flex;align-items:center;gap:18px}
.marca img{height:64px}
h1{margin:0;color:#364E67}
p{margin:4px 0 0;color:#666}
#busca{display:block;margin:20px auto;width:min(700px,90%);padding:12px;border-radius:10px;border:1px solid #ccc}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;padding:20px}
.card{background:#fff;border-radius:14px;padding:28px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.08);text-decoration:none;color:#364E67;transition:.2s}
.card:hover{transform:translateY(-4px)}
.numero{font-size:42px;font-weight:bold;color:#3B9CD6}
.modo{margin:20px;padding:20px;background:#eaf6fd;border-left:6px solid #3B9CD6;border-radius:12px}