* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; background: #f5f6f8; color: #222; }
.topbar { background:#1a1a2e; color:#fff; padding:.75rem 1.25rem; display:flex; justify-content:space-between; align-items:center; }
.topbar .brand { font-weight:600; display:flex; align-items:center; gap:.5rem; }
.topbar .logo { height:32px; }
.topnav { display:flex; gap:1rem; align-items:center; }
.topnav .user { opacity:.85; font-size:.9rem; }
.btn-link { background:none; border:0; color:#fff; cursor:pointer; text-decoration:underline; }
.container { max-width: 960px; margin: 1.5rem auto; padding: 0 1rem; }
.card { background:#fff; border-radius:8px; padding:1.5rem; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.alert { padding:.75rem 1rem; border-radius:6px; margin-bottom:1rem; font-size:.95rem; }
.alert-error { background:#fde2e2; color:#7a1f1f; }
.alert-ok { background:#d8f3dc; color:#1b4332; }
.alert-info { background:#e0ecff; color:#1c3d7a; }
.alert-warning { background:#fff3cd; color:#664d03; }
.btn { display:inline-block; padding:.55rem 1.1rem; border-radius:6px; background:#444; color:#fff; text-decoration:none; border:0; cursor:pointer; }
.btn-primary { background:#2a6df4; }
.footer { text-align:center; color:#888; padding:2rem 0 1rem; }
.inline { display:inline; }
.hero {
  text-align:center;
  padding:6rem 1.5rem;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url("../img/Portada_Web.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.hero h1 { color:#fff; font-size:2.4rem; }
.hero p { color:#f0f0f0; font-size:1.1rem; }
.hero .btn { background:#fff; color:#1a1a2e; font-weight:600; padding:.7rem 1.6rem; }
.hero .btn:hover { background:#f0f0f0; }
.hero h1 { margin:0 0 .5rem; }