*{box-sizing:border-box}
:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#222;
  --muted:#555;
  --brand:#003366;
  --shadow:0 2px 8px rgba(0,0,0,.10);
  --radius:10px;
}
body{margin:0;font-family:system-ui,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}
.container{max-width:1000px;margin:0 auto;padding:1.2rem}
.topbar{
  position:sticky;top:0;z-index:20;
  background:#ffffffcc;backdrop-filter:blur(8px);
  border-bottom:1px solid #e6e6e6;
}
.topbar .container{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{width:34px;height:34px}
.brand strong{color:var(--brand);font-size:1rem}
.nav{display:flex;flex-wrap:wrap;gap:.6rem}
.nav a{
  text-decoration:none;
  padding:.55rem .75rem;
  border-radius:999px;
  color:var(--brand);
  background:#e9f1ff;
  font-weight:600;
  font-size:.92rem;
}
.nav a:hover{filter:brightness(.97)}
.hero{
  position:relative;
  background:url("img/liceo7.jpg") center/cover no-repeat;
  color:white;
  text-align:center;
  padding:3rem 1rem;
}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.50)}
.hero *{position:relative}
.hero .logo{max-width:110px;margin-bottom:1rem}
.hero h1{margin:.2rem 0}
.hero p{margin:.3rem 0;opacity:.95}

.estado{
  text-align:center;
  font-weight:700;
  padding:1rem;
  color:var(--brand);
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.2rem;
}
.btn{
  display:block;
  text-decoration:none;
  background:var(--card);
  color:var(--brand);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.1rem 1rem;
  font-weight:800;
  text-align:center;
}
.btn:hover{background:#f9fbff}
.btn.disabled{opacity:.45;pointer-events:none}
.small{font-size:.92rem;color:var(--muted)}
.bienvenida{
  max-width:900px;
  margin:2rem auto;
  background:var(--card);
  padding:2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  line-height:1.65;
}
.bienvenida h2{text-align:center;margin:0 0 1rem 0}
.firma{text-align:center;margin-top:1.5rem;font-weight:700}
.firma span{display:block;font-weight:500;font-size:.95rem;color:var(--muted)}
.footer{
  text-align:center;
  padding:1.2rem .8rem;
  color:var(--muted);
  font-size:.92rem;
}
.form{display:grid;gap:.8rem}
input, select, button, textarea{
  font:inherit;
  padding:.7rem .8rem;
  border-radius:10px;
  border:1px solid #d9d9d9;
}
button{
  cursor:pointer;
  background:var(--brand);
  color:white;
  border:none;
  font-weight:800;
}
button:hover{filter:brightness(.96)}
.notice{
  background:#fff6d8;
  border:1px solid #f1d27a;
  padding:.9rem 1rem;
  border-radius:var(--radius);
}
ul{padding-left:1.2rem}