:root{
  --text:#1c1c1c;
  --muted:#343547;
  --card-bg:#ffffff;
  --chip:#f3f3f7;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family: "Poppins", sans-serif;
  color: var(--text);
  background: linear-gradient(152deg, rgba(147,204,236,1) 0%, rgba(186,225,250,1) 100%);
  min-height: 100vh;
}

/* NAV SUPERIOR */
nav{
  width:min(1100px, 92%);
  margin: 18px auto 0;
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 18px;
  box-shadow: var(--shadow);
}

nav a{
  text-decoration:none;
  color: var(--muted);
  font-weight:600;
  padding: 10px 14px;
  border-radius: 999px;
  transition: .2s ease;
}
nav a:hover{ background: var(--chip); color: #000; }

/* HEADER */
header{
  width:min(1100px, 92%);
  margin: 64px auto 20px;
  text-align:center;
  color: var(--text);
}

header img{
  width: 160px;
  height:160px;
  object-fit:cover;
  border-radius: 50%;
  display:block;
  margin: 0 auto 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

header h1{ margin: 8px 0 6px; font-size: 32px; }
header h2{ margin: 0 0 6px; font-weight:600; color:#111; }
header h3{ margin: 6px 0 0; font-weight:500; color:#555; }

/* NIVELES */
.materias{
  width:min(1100px, 92%);
  margin: 40px auto 0;
}
.levels-container{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 22px;
}

.level-box{
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 22px 22px 10px;
  box-shadow: var(--shadow);
}

.level-box h1{ font-size: 22px; margin: 0 0 10px; }
.level-box ul{ margin: 0; padding: 0 0 6px 18px; display:grid; gap: 6px; color:#333; }

/* INTEGRANTES */
h2{
  width:min(1100px, 92%);
  margin: 26px auto 8px;
  font-size: 26px;
}

.nav2{
  width:min(1100px, 92%);
  margin: 8px auto 16px;
  display:flex; flex-wrap:wrap; gap: 10px;
}

.nav2 a{
  text-decoration:none;
  color:#111;
  background:#fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight:600;
  box-shadow: var(--shadow);
  transition:.2s ease;
}
.nav2 a:hover{ transform: translateY(-1px); }

/* INFO */
.info{
  width:min(1100px, 92%);
  margin: 26px auto 40px;
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 16px;
}

.info-cat{
  background:#fff;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  color:#222;
}
.info-cat p{ margin: 6px 0; }

.serif{ font-style: italic; }

/* FOOTER */
footer{
  width:min(1100px, 92%);
  margin: 20px auto 50px;
  background:#ffffffcc;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  line-height:1.5;
  color:#222;
}

/* RESPONSIVE */
@media (max-width: 640px){
  header img{ width: 120px; height:120px; }
}