* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; line-height:1.6; }


.topbar {
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; gap:8px;
  background:#eee; padding:6px 12px;
}
.topbar .dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.red{background:red;} .yellow{background:gold;} .green{background:limegreen;}
.topbar .url{ font-size:0.9rem; color:#555; }


.encabezado {
  margin-top:50px; 
  display:flex; gap:20px; align-items:center;
  padding:20px; background:#f5f5f5;
}
.foto-perfil { width:200px; height:200px; border-radius:90%; object-fit:cover; }
.redess { width:50px; height:50px; border-radius:50%; object-fit:cover; }
.puesto { color:#555; margin:4px 0; }
.contacto { list-style:none; }


.layout {
  display:flex; gap:20px;
  padding:20px;
}
.sidebar {
  flex:0 0 250px;
  position:sticky; top:60px;
  background:#fafafa; padding:15px; border:1px solid #ddd;
}
.sidebar h2 { margin-bottom:8px; }
.sidebar ul { margin-bottom:16px; list-style:square inside; }


.principal { flex:1; }
.principal h2 { margin:16px 0 8px; }
.principal .meta { font-size:0.9rem; color:#666; }
.marcos { display:flex; gap:20px; flex-wrap:wrap; margin-top:10px; }
.marcos figure { flex:1; border:1px solid #ddd; padding:8px; }
.marcos img { width:100%; height:150px; object-fit:cover; }


.pie {
  text-align:center; padding:20px; background:#f5f5f5; margin-top:20px;
}
.redes { list-style:none; display:flex; justify-content:center; gap:15px; margin-bottom:8px; }


.badge {
  position:absolute; bottom:20px; right:20px;
  background:#28a745; color:#fff; padding:6px 12px; border-radius:20px;
}