:root {
  --bg:#f9fafb;
  --primary:#2563eb;
  --secondary:#1e293b;
  --light:#ffffff;
  --muted:#6b7280;
}

/* Base */
body {
  margin:0;
  font-family: Inter, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--secondary);
}

h1,h2,h3 {
  margin-top:0;
}

button, a.btn {
  display:inline-block;
  background:var(--primary);
  color:white;
  padding:10px 20px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
}

button:hover, a.btn:hover {
  background:#1e40af;
}

/* Layout */
header {
  width:100%;
  max-width:800px;
  height:200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

header img {
  width:800px;
  height:200px;
  object-fit:cover;
  border-radius:8px;
}

main {
  max-width:960px;
  margin:20px auto;
  padding:20px;
}

.card {
  background:var(--light);
  border-radius:16px;
  padding:20px;
  margin:20px 0;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}

/* Grid */
.grid {
  display:grid;
  gap:20px;
}
.grid-2 {
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

/* Diagramas */
.diagram img {
  width:100%;
  max-height:200px;
  object-fit:cover;
  border-radius:12px;
  cursor:pointer;
  transition:.3s;
}
.diagram img:hover {
  transform:scale(1.05);
}

/* Modal */
.modal {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.modal img {
  max-width:90%;
  max-height:80%;
  border-radius:16px;
}
.close {
  position:absolute;
  top:20px;
  right:30px;
  font-size:2rem;
  color:white;
  cursor:pointer;
}

/* Footer */
footer {
  text-align:center;
  padding:20px;
  color:var(--muted);
}