/* Estilo global */
body {
  font-family: "Poppins", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f0f4f8;
  color: #333;
  text-align: center;
}

/* Cabeçalho */
header {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  padding: 40px 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
header h1 {
  margin: 0;
  font-size: 2.5rem;
}
header p {
  margin-top: 10px;
  font-size: 1.2rem;
  opacity: 0.9;
}

/* Secções das matérias */
main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 30px;
}

.materia {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: left;
}
.materia:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.15);
}

.materia h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

/* Cores diferentes por matéria */
.azul { border-top: 6px solid #2196f3; }
.verde { border-top: 6px solid #4caf50; }
.roxo { border-top: 6px solid #9c27b0; }
.laranja { border-top: 6px solid #ff9800; }
.azulClaro { border-top: 6px solid #839deb; }
.verdeClaro { border-top: 6px solid #a5eea0; }
.roxoClaro { border-top: 6px solid #d3bcf6; }
.laranjaClaro { border-top: 6px solid #ffba6a; }
.rosaClaro {border-top: 6px solid #fc94af;}

/* Lista de recursos */
ul {
  list-style: none;
  padding-left: 0;
}
ul li {
  margin: 10px 0;
}
ul li a {
  text-decoration: none;
  font-size: 1rem;
  color: #333;
  background: #f9f9f9;
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  transition: background 0.2s;
}
ul li a:hover {
  background: #e3e3e3;
}

/* Botão voltar */
.botao {
  display: inline-block;
  margin: 20px;
  padding: 12px 25px;
  background: #2a5298;
  color: white;
  border-radius: 8px;
  font-size: 18px;
  transition: 0.3s;
  text-decoration: none;
}
.botao:hover {
  background: #1e3c72;
}



:root {
  --indigo:#2a5298; --indigo-dark:#1e3c72;
  --bg:#f0f4f8; --card:#ffffff; --muted:#6b7280; --text:#1f2937;
  --roxoClaro:#b388ff; --verdeClaro:#8de4af; --azulClaro:#90caf9; --laranjaClaro:#ffcc80; --rosaClaro:#f8a8c8;
  --radius:16px;
}

body { margin:0; font-family:Inter,system-ui,Arial; background:var(--bg); color:var(--text); }
header { background:linear-gradient(135deg,var(--indigo),var(--indigo-dark)); color:#fff; padding:30px 18px; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,.2);}
header h1{margin:0;font-size:2rem}
header p{margin:.5rem 0 0;opacity:.9}

main{padding:28px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; max-width:1100px; margin:0 auto;}
.materia{background:var(--card); border-radius:var(--radius); padding:18px; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.08); transition:.2s;}
.materia:hover{transform:translateY(-4px); box-shadow:0 14px 26px rgba(0,0,0,.12);}
.materia h2{margin:0;font-size:1.15rem}

.borda{position:relative; padding-top:8px}
.borda::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; border-radius:10px 10px 0 0;}
.azulClaro.borda::before{background:var(--azulClaro)}
.verdeClaro.borda::before{background:var(--verdeClaro)}
.roxoClaro.borda::before{background:var(--roxoClaro)}
.laranjaClaro.borda::before{background:var(--laranjaClaro)}
.rosaClaro.borda::before{background:var(--rosaClaro)}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:20px; z-index:1000}
.overlay.open{display:flex}
.modal{background:var(--card); width:min(900px,100%); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.35); overflow:hidden}
.modal header{background:#fff; color:var(--text); box-shadow:none; padding:18px; text-align:left}
.modal h2{margin:0;font-size:1.4rem}
.head{display:flex; align-items:center; gap:12px}
.close{margin-left:auto; background:transparent; border:0; font-size:1.6rem; cursor:pointer; color:var(--muted)}
.crumbs{font-size:.9rem;color:var(--muted);margin-top:6px}
.desc{color:var(--muted);margin-top:4px;font-size:.95rem}

.content{padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{padding:14px;border-radius:14px;background:#f8fafc;border:1px solid #e5e7eb;cursor:pointer;transition:.2s;display:flex;gap:10px;align-items:flex-start}
.card:hover{background:#eef2ff;border-color:#c7d2fe}
.card h3{margin:0;font-size:1.05rem}
.card p{margin:4px 0 0;color:var(--muted);font-size:.9rem}

.list{display:flex;flex-direction:column;gap:10px}
.item a{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;transition:.2s}
.item a:hover{background:#f3f4f6}

.backline{margin-bottom:12px}
.btn{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
.btn:hover{background:#f3f4f6}

footer{padding:14px 0 28px;text-align:center}
.botao{display:inline-block;background:var(--indigo);color:#fff;padding:10px 18px;border-radius:10px;text-decoration:none}
.botao:hover{background:var(--indigo-dark)}