body{
      font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
      background:#f6f7fb;
      margin:0;
    }
    /* Barra superior */
    .topbar{
      background:#0d6efd;
      color:#fff;
      padding:12px 20px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      box-shadow:0 2px 4px rgba(0,0,0,0.1);
      position:sticky;
      top:0;
      z-index:100;
    }
    .topbar h1{
      margin:0;
      font-size:1.25rem;
      font-weight:600;
    }
    .topbar .actions{
      display:flex;
      gap:10px;
    }
    .topbar a{
      background:#fff;
      color:#0d6efd;
      padding:8px 14px;
      border-radius:8px;
      font-weight:600;
      text-decoration:none;
      transition:background .2s,color .2s;
    }
    .topbar a:hover{
      background:#0b5ed7;
      color:#fff;
    }

    /* Contenido */
    .wrap{max-width:800px;margin:48px auto;padding:0 16px;text-align:center}
    .card{
      background:#fff;
      border:1px solid #e5e7eb;
      border-radius:16px;
      padding:24px;
      box-shadow:0 2px 6px rgba(0,0,0,0.05);
      transition:transform .15s;
      display:inline-block;
      min-width:280px;
    }
    .card:hover{transform:translateY(-3px)}
    .card h2{margin-top:0;color:#0d6efd;font-size:1.2rem}
    .card p{color:#374151}
    a.btn{
      display:inline-block;
      padding:12px 16px;
      border-radius:10px;
      background:#0d6efd;
      color:#fff;
      text-decoration:none;
      font-weight:600;
      transition:background .2s;
    }
    a.btn:hover{background:#0b5ed7}